Below is a simple HTML code snippet:
<div class="dialogs">
<div id="wrapper" >
<p>{{createTestingConstant()}}</p>
<ng-container *ngFor="let one of contacts">
<p>{{one.NickName | json }}</p>
</ng-container>
</div>
</div>
In this code, I am trying to display the output of a function and each nickname from the data table.
Here is the typescript file:
@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 = _;
});
}
The function being used:
createTestingConstant(): bigInt.BigInteger {
return bigInt(1);
}
}
Contact 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);
}
}
The resulting view:
However, simplifying the code doesn't yield the expected result:
<div class="dialogs">
<div id="wrapper" >
<p>{{createTestingConstant()}}</p>
<ng-container *ngFor="let one of contacts">
<p>{{one | json }}</p>
</ng-container>
</div>
</div>
The actual outcome can be seen here:
Question: Why am I unable to retrieve the `NickName` attribute individually, and how should I approach displaying only that specific attribute?
Thank you for any assistance.
P.S.: Additional Information about the Contact interface
import * as bigInt from "big-integer";
export interface Contact {
ContactID: bigInt.BigInteger;
ContactLogin: string;
NickName: string;
Pass: string;
ProfilePhotoPath: string;
PhoneNumber: string;
}