angular2 ngFor将无法正常工作

我试图让每个用户点击一个按钮时出现一些文本框。我正在用ngFor做这件事。出于某种原因，ngFor不会迭代。我试过使用切片来改变数组引用，但仍然不会出现文本框。angular2 ngFor将无法正常工作

任何想法我做错了什么？以下是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>

来源

2016-11-16 Tal Geller

您通过ID引用'＃subjectName'文本框，但它位于'* ngFor'内。不会重复，并且不会有身份冲突吗？当你在你的点击处理程序中调用'addSubject（）'时，你引用了哪个文本框？我很困惑。 –

你缺少在* ngFor

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

来源

2016-11-16 19:16:20 yBrodsky

你有你的控件编写的主旨名称不存在，因为该数组是空的，因此*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>

我怀疑你也想为你遍历对象名称来进一步绑定数据，但是这是问题的范围之外。

这里有一个plunker：http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview

来源

2016-11-16 19:23:20 silentsod

首先，你缺少*以* ngFor。第二个推出

<input #subjectName type="text" />

从ngFor，应该工作。

来源

2016-11-16 20:39:35

angular2 ngFor将无法正常工作

回答

相关问题