angular2 ngFor не работает

Question

Я пытаюсь сделать несколько текстовых полей каждый раз, когда пользователь нажимает кнопку. Я делаю это с ngFor. По какой-то причине 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>

Answer 1

У вас не хватает * в * ngFor

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

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

Я подозреваю, что вы хотите в дальнейшем связать данные, как вы перебирать имена субъектов, но это выходит за рамки вопроса.

Вот plunker: http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview

Answer 3

Во-первых, вам не хватает * в * ngFor. Второй гасить

<input #subjectName type="text" /> 

из ngFor, должен работать.