如何在 table 中使用占位符和 ngFor Angular2

Question

我有一个数组

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

我想做一个 table 的输入，哪些值取决于我现在使用哪个部分 http://localhost:4200/app?part=1 和

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

我在我的组件中得到这些信息

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

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

我试过这个代码

      <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>

这将为您提供带有占位符 "hello"、"apple" 等的输入。

如果您想要的是每个输入只有一个字母占位符，那么只需在 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>

如何在 table 中使用占位符和 ngFor Angular2

How to use placeholder with inputs in table with ngFor Angular2

javascript

typescript

ngfor

angular