Question

我正在Angular2项目上工作，想在单击按钮时动态向表中添加行。我知道*ngFor可用于动态添加行，但是我很感兴趣是否只有在单击按钮后才可以使用*ngFor。

Answer 1

通常，您使用* ngFor遍历数组（通常是对象）。因此，如果您的数组称为“数据”，则可以有一些类似的

<table *ngIf="data.length">  <!--Don't show nothing if no data-->
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr *ngFor="let item of data">
   <td>{{item.firstName}}</td>
   <td>{{item.lastName}}</td>
   <td>{{item.age}}</td>
</tr>
</table>

其中有可变数据，例如

data:any[]=[] //don't forget initialize!

一个按钮可以执行类似的操作

onClick()
{
   this.data.push({firstName:"firstName",lastName:"Last Name",age:18})
}

Answer 2

我认为这很有可能。 Angular网站有一个不错的教程（Tour Of Heroes），它可以完成您所需的操作。希望对您有所帮助。

Answer 3

快速样本：

  <button (onClick)="sth=!sth">click</button>
       <div *ngIf="sth">
        <div *ngFor="...">
         ...
        </div>
       </div>

如何使用Angular2在单击按钮时动态向表添加行？

3 个答案: