Question

我正在尝试“todo-list”和新的'todo'不添加，所以控制台中没有任何错误。我找不到它无法工作的原因，这是我的代码：它是component.ts

的代码

    export class TableComponent {
      newName: any;
        newDate: any;
        newInput: any;
        newOutput: any;
        newProfit: any;
        list: any;
        listObj: any;

        constructor() {
          this.newName = '';
          this.newDate = '';
          this.newInput = '';
          this.newOutput = '';
          this.newProfit = '';
          this.list = [];
        }

        addOperation(event) {
          this.listObj = {
            newName: this.newName,
            newDate: this.newDate, 
            newInput: this.newInput, 
            newOutput: this.newOutput, 
            newProfit: this.newProfit   
          }
          this.list.push(this.listObj);
          this.newName = '';
          this.newDate = '';
          this.newInput = '';
          this.newOutput = '';
          this.newProfit = '';
          event.preventDefault();
   }
   }

这里是.html文件：

  <div><form (submit)="addOperation($event)">
 <input [(ngModel)]="newName"  class="textfield" name="newName">
 <input [(ngModel)]="newDate"  class="textfield" name="newDate">
 <input [(ngModel)]="newInput"  class="textfield" name="newInput">
 <input [(ngModel)]="newOutput"  class="textfield" name="newOutput">
 <input [(ngModel)]="newProfit"  class="textfield" name="newProfit">
 <button  type="submit">Add Todo</button>
 </form>
 <table>
    <tr *ngFor="let item of list; index as i; first as isFirst" border="1">
        <td>{{item.NewName}}</td><td>{{item.NewDate}}</td><td>{{item.NewInput}}</td><td>{{item.NewOutput}}</td><td>{{item.NewProfit}}</td>
    </tr>
 </table>
 </div>

希望有人可以帮助我，谢谢你）

UPDATE1：
当我使用{{item | json它以json格式显示我{{newName“：”123“，”newDate“：”“，”newInput“：”“，”newOutput“：”“，”newProfit“：”“}

Update2：在控制台中添加后我看到如下：无法读取未定义的属性“NewOutput”

Answer 1

首先，Javascript / Typescript区分大小写，因此{{item.NewName}}应为{{item.newName}}才能生效。

除此之外，您使用错误的语法来跟踪索引。您应该使用let来声明索引：

<table>
    <tr *ngFor="let item of list; let i = index; let isFirst = first" border="1">
        <td>{{item.newName}}</td><td>{{item.newDate}}</td><td>{{item.newInput}}</td><td>{{item.newOutput}}</td><td>{{item.newProfit}}</td>
    </tr>
</table>

工作Plnkr： Plunker

Answer 2

问题在于对象名称不正确。您正尝试使用大写NewName访问对象的属性，但它们使用小写newName声明。您的*ngFor必须是：

<tr *ngFor="let item of list; index as i; first as isFirst" border="1">
      <td>{{item.newName}}</td>
      <td>{{item.newDate}}</td>
      <td>{{item.newInput}}</td>
      <td>{{item.newOutput}}</td>
      <td>{{item.newProfit}}</td>
 </tr>

angular 2 todo list cant fint问题，不要告诉我新的

2 个答案: