Угловые 4-Добавить строки в таблице

Question

У меня есть подписка на эту услугу

callSearchService($event) {
   this.searchService.searchUser(this.firstName,this.lastName).subscribe(
    data => {
        console.log("we got: ", data);
        this.isNull(data.firstName,data.lastName);
    },
    error => {
        console.log("Error",error);
    },
);

, а также у меня есть таблица.

 <thead>
      <tr>
        <th>#</th>
        <th>FirstName</th>
        <th>LastName</th>
      </tr>
    </thead>

Мне интересно, как динамически добавлять строки в мою таблицу, когда я получаю информацию о пользователе (имя и фамилия) из callSearchService

Answer 1

You can use ngFor.

suppose you are getting the results in userdetails[] variable.


    <tr *ngFor="let userdetail of userdetails | async">
            <td>
              {{userdetail.firstName}}
            </td>
             <td>
              {{userdetail.lastName}}
            </td>
          </tr>

Answer 2

что-то вроде этого

users = []; //user array

<thead>
      <tr>
        <th>#</th>
        <th>FirstName</th>
        <th>LastName</th>
      </tr>
    </thead>

<tbody>
<ng-container *ngFor="let user of users; let i=index;">
<tr>
<th>{{i}}</th>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
</tr>
</ng-container>
</tbody>

при получении нового пользователя просто обновите массив и остальные вещи будут работать нормально

callSearchService($event) {
   this.searchService.searchUser(this.firstName,this.lastName).subscribe(
    data => {
        console.log("we got: ", data);
        this.isNull(data.firstName,data.lastName);
    this.users.push(data);
    },
    error => {
        console.log("Error",error);
    },
);