javascript - Angular - 无法迭代数组

Question

我正在尝试迭代数组，但无法这样做(它是数组下的数组)。 它给出了一个错误:

TypeError: Cannot read property 'toUpperCase' of undefined ("

我没有在任何地方使用 toUpperCase。

typescript 代码是:

ngOnInit() {
      this.data = [
          {
              'name': 'Task 1',
              'to_do': ['ToDo1', 'ToDo2', 'ToDo3']
          },
          {
              'name': 'Task 2',
              'to_do': ['ToDo4', 'ToDo5', 'ToDo6']
          }
      ];

  }

模板代码为:

<div class="col-md-12">
        Create New Task: <input type="text" name="task" />

        <ul>
          <li *ngFor="let task of data; let i=index; let todo=task.to_do;">
            <div>
              {{ task.name }}
              {{ todo }}
            </div>
            <div *ngFor="let do of todo">
              <input type="text" name="to_do" value="{{ do }}" />
            </div>
          </li>
        </ul>
      </div>

Answer 1

实际上是let todo=task.to_do;导致的模板解析错误

您只能为 ngFor 的导出值(索引、奇数、偶数等)声明局部变量

https://angular.io/api/common/NgForOf#local-variables

试试这个

    <ul>
      <li *ngFor="let task of data; let i=index; ">
        <div>
          {{ task.name }}
          {{ task.to_do}}
        </div>
        <div *ngFor="let do of task.to_do">
          <input type="text" name="to_do" value="{{ do }}" />
        </div>
      </li>
    </ul>

注意:ngFor导出一个$implicit值，它等于循环中的当前项。但是，以下内容不起作用(我认为它只能评估简单的作业

 <li *ngFor="let task of data; let i=index; let todo=$implicit.to_do;">

但是，它可以使用 ngFor 的 ng-template 形式和 let-variable 语法(但更详细)

        <ng-template ngFor let-todo=$implicit.to_do let-task [ngForOf]="data" let-i="index" >
  <li>
  <div>
              {{ task.name }}
              {{ todo }}
            </div>
            <div *ngFor="let do of todo">
              <input type="text" name="to_do" value="{{ do }}" />
            </div>
            </li>
  </ng-template>

这是一个展示两种方式的 stackblitz

https://stackblitz.com/edit/angular-cces4g?file=app%2Fapp.component.html