angular2 ngFor 不起作用答案

【问题标题】：angular2 ngFor won't workangular2 ngFor 不起作用
【发布时间】：2016-11-16 19:10:49
【问题描述】：

我试图让一些文本框在用户每次点击按钮时出现。我正在用 ngFor 做这个。出于某种原因，ngFor 不会迭代。我尝试使用 slice 来更改数组引用，但仍然不会出现文本框。

知道我做错了什么吗？下面是 HTML 和组件代码。谢谢！！！

export class semesterComponent {
  subjectsNames = [];

  addSubject(subjectName: string) {
    if (subjectName) {
      this.subjectsNames.push(subjectName);
      this.subjectsNames.slice();
      console.log(subjectName);
      console.log(this.subjectsNames);
    }

  };

<div class="semester-div">
  <ul>
    <li ngFor="let subject of subjectsNames">
      <span>
       <input #subjectName type="text" />
       <input id = "subjectGrade" type = "number"/>
       <input id = "subjectWeight" type = "number"/>
      </span>
    </li>
  </ul>
  <br>
  <button (click)="addSubject(subjectName.value)">add</button>
  <br>
</div>

【问题讨论】：

您通过 ID 引用了 #subjectName 文本框，但它在 *ngFor 内。不会重复，不会有ID冲突吗？当您在单击处理程序中调用 addSubject() 时，您引用的是哪个文本框？我对此感到困惑。

标签： javascript html angular typescript

【解决方案1】：

您在 *ngFor 中缺少 *

<li *ngFor="let subject of subjectsNames">

【讨论】：

【解决方案2】：

您编写控件的方式 subjectName 不存在，因为数组为空，因此 *ngFor 不会呈现它。单击“添加”按钮会导致 undefined 上不存在该值的异常，其中 undefined 实际上是 subjectName。

将其移出*ngFor 即可：

<input #subjectName type="text" />
  <ul>
    <li *ngFor="let subject of subjectsNames">
      <span>
      {{subject}}
       <input id="subjectGrade" type="number"/>
       <input id="subjectWeight" type="number"/>
      </span>
    </li>
  </ul>

我怀疑您还想在迭代主题名称时进一步绑定数据，但这超出了问题的范围。

这是一个笨蛋：http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview

【讨论】：

【解决方案3】：

首先，您在 *ngFor 中缺少 *。第二个放出来

<input #subjectName type="text" />

来自 ngFor，应该可以工作。

【讨论】：