In client.ts this is the model:

 export class Client { name: string; id: number; surname: string; city: string; street: string; housenumber: string; apartment: string; phones: string[]; }

I bring the data to this table:

 <table> <tr *ngFor="let client of clients | filter: searchString"> <td>{{client.id}}</td> <td>{{client.name}}</td> <td>{{client.surname}}</td> <td>{{client.city}}</td> <td>{{client.street}}</td> <td>{{client.housenumber}}</td> <td>{{client.apartment}}</td> <td>{{client.phones}}</td> <td><button type="button" (click)="loadTask(client.id)">View Task</button></td> </tr> </table>

How in angular 4 to display an array of values ​​of phones in the table beautifully?
Now I have a set of Object types:

Table

  • It is possible to make one more ngFor - diraria in the corresponding td
  • @diraria and how to do it right? - Anton Evseev
  • one
    Something like <span *ngFor='let phone of client.phones'>{{phone}}</span> . So each phone will be wrapped in a span , if you want without wrapping, you can use ng-container - diraria
  • @diraria The same result ** [object Object] ** Values ​​are not visible - Anton Evseev
  • Try outputting the phones array and the type of the first element of this array, typeof (phones [0]), to the console. It feels like no strings are written in this array - diraria

1 answer 1

This code solved the problem <td *ngFor='let phone of client.phones'>{{phone.phoneNumber}}</td>