如何在表格中使用含有ngFor Angular2

Question

我有一个数组

 public example = [['hallo', 'fruit', 'rose'], ['apple','book']]

我想制作一个输入表，其值取决于我现在使用的部分 http://localhost:4200/app?part=1和

http://localhost:4200/app?part=2

我在我的组件中获取此信息

   this.part = this.activatedRoute.snapshot.queryParams['part'];

我想要的是第一部分的输入表 和这样的输入表   如果我有第二部分。

我试过这段代码

      <table>
//choose 0 or 1 array in example array (this works!)
        <tr *ngFor="let a of example[part-1]">
          <td><input> </td>
        </tr>
      </table>

我的问题是，如果我尝试在输入中插入占位符或ngFor，我就不会得到我的结果......我怎么能解决这个问题？

Answer 1

我不是很清楚你想要实现的目标，但你可以尝试：

  <table>
    //choose 0 or 1 array in example array (this works!)
    <tr *ngFor="let a of example[part-1]">
      <td><input [placeholder]="a"></td>
    </tr>
  </table>

这将为您提供占位符＆＃34; hello＆＃34;，＆＃34; apple＆＃34;等等的输入。

如果您想要的是每个输入只有一个字母占位符，那么只需在td上添加另一个* ngFor

  <table>
    //choose 0 or 1 array in example array (this works!)
    <tr *ngFor="let a of example[part-1]">
      <td *ngFor="let b of a.split('')"><input [placeholder]="b"></td>
    </tr>
  </table>