I have got simple html:

<div >
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one.NickName | json }}</p>
        </ng-container>
  </div>
</div>

Here I tried to print the result of the function and every nick from the table.

ts:

@Component({
  selector: 'app-get-chat',
  templateUrl: './get-chat.component.html',
  styleUrls: ['./get-chat.component.scss'],
})
export class GetChatComponent implements OnInit {
  contacts: Contact[];
  constructor(private contactService: ContactService) {}

  ngOnInit(): void {
    this.contactService.getAll().subscribe((_) => {
      this.contacts = _;
    });
  }

Actually the function:

  createTestingConstant(): bigInt.BigInteger {
    return bigInt(1);
  }
}

service:

@Injectable({
  providedIn: 'root',
})
export class ContactService {
  private url = environment.apiUrl   '/contact';

  constructor(private http: HttpClient) {}

  public getAll(): Observable<Contact[]> {
    return this.http.get<Contact[]>(this.url);
  }


  public create(request: CreateContactRequest): Observable<void> {
    return this.http.post<void>(this.url, request);
  }
}

result:

BUT if I try to simplify a bit:

<div >
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one | json }}</p>
        </ng-container>
  </div>
</div>

The result actually appears:

Question: why I can get all the data from table, but not the one attribute, and how to get only it?

Thanks for any help.

P.S.: Contact

import * as bigInt from "big-integer";

export interface Contact {
    ContactID: bigInt.BigInteger;
    ContactLogin: string;
    NickName: string;
    Pass: string;
    ProfilePhotoPath: string;
    PhoneNumber: string;
  }

CodePudding user response：

Typo on nickName, that's it

<div >
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one.nickName | json }}</p>
        </ng-container>
  </div>
</div>

CodePudding user response：

Well, I have just reworked Contact interface and this seems fine:

export interface Contact {
    contactID: bigInt.BigInteger;
    contactLogin: string;
    nickName: string;
    pass: string;
    profilePhotoPath: string;
    phoneNumber: string;
  }

Uppercase to lower, yes. No idea how to contain C# convention as well.