Угловой 6 - заполнить таблицу динамически - PullRequest
Новая
       7

Угловой 6 - заполнить таблицу динамически

0 голосов
/ 11 ноября 2018

Я пытаюсь заполнить таблицу динамически, но не могу понять, почему это не работает!

Здесь я получаю свой json, где я сохраняю массив объектов в customerArray. 

export class AllCustomersComponent implements OnInit {
customerArray: any;


    constructor(private http : HttpClient ) {}

    ngOnInit() {
         this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
        .subscribe((data) => {
           this.customerArray = data;
          console.log(customerArray);
      }
    }
}

здесь я пытаюсь заполнить таблицу указанным массивом. 

<table class="table">
        <thead>
          <tr>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>46</td>
            <td><i class="fas fa-edit"></i></td>
            <td><i class="fas fa-trash-alt"></i></td>
          </tr>
          <tr>
            <td *ngFor="let customer of customerArray">{{customer}}</td>
          </tr>
        </tbody>
      </table>

но мой стол просто рендерит это: 

[object Object] [object Object] [object Object] [object Object] [object Object]

1 Ответ

0 голосов
/ 11 ноября 2018

Ваш клиент - это объект, как должен Angular знать, что для него сделать?

Вам может понадобиться что-то вроде этого: 

<tr *ngFor="let customer of customerArray">
   <td>{{customer.firstname}}</td>
   <td>{{customer.lastname}}</td>
   <td>{{customer.age}}</td>
   <td>{{customer.whatever}}</td>
   <td>{{customer.whatever}}</td>
</tr>
...