Question

我试图迭代数组但不能这样做（它是数组下的数组）。它给出了一个错误：

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

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

打字稿代码是：

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>

注意：$implicit导出ngFor值，等于循环中的当前项。但是，以下方法不起作用（我认为它只能评估简单的作业

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

但是，它会使用ng-template形式的ngFor形式，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

Angular - 不能迭代数组

1 个答案: