Question

以下是JSON数据：

{
  "tagFrequency": [
    {
      "value": "At",
      "count": 1,
      "tagId": 249
    },
    {
      "value": "ipsum",
      "count": 1,
      "tagId": 251
    },
    {
      "value": "molestie",
      "count": 1,
      "tagId": 199
    }
  ]
}

我在UI中将这些数据填充到一个表中，该表的列名为word，频率分别为上面的JSON对象属性值和count。使用tagId通过GET API调用提取第三列标记名称。以下是我的组件代码：

ngOnInit() {
    if (this.route.snapshot.url[0].path === 'tag-frequency') {
      let topicId = +this.route.snapshot.params['id'];

      this.tagService.getTagFrequency(topicId)
      .then(
        (response: any) => {
          this.frequencies = response.json().tagFrequency;
          for (let tagFrequency of this.frequencies) {
            this.getTagName(tagFrequency.tagId);
          }
        }
        )
      .catch(
        (error: any) => console.error(error)
        );
    }
  }

  getTagName(tagId: number) {
    this.tagService.getTag(tagId)
      .then(
        (response: any) => this.tagNames.push(response.name)
        )
      .catch(
        (error: any) => console.error(error)
        );
  }

  sort(value: string) {
    this.direction = this.direction * (-1);
    this.key = value;
  }
}

这是我的HTML代码：

    <table>
      <thead>
        <tr>
          <th (click)="sort('value')">{{ 'word' | translate }}</th>
          <th>{{ 'tag-name' | translate }}</th>
          <th>{{ 'frequency' | translate }}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let frequency of frequencies; let i = index | TagFrequencySorter: key: direction">
          <td>{{ frequency.value }}</td>
          <td>{{ tagNames[i] }}</td>
          <td>{{ frequency.count }}</td>
        </tr>
      </tbody>
    </table>

如果我不在HTML中添加管道“TagFrequencySorter”，我可以正确地看到表中的所有数据。如果我添加，那么我收到错误：

未处理的Promise拒绝：模板解析错误：TypeError：不能读取未定义的属性'toUpperCase'（“ ] * ngFor =“让频率的频率;让我=索引| TagFrequencySorter：key：direction”＆gt; “）：TagFrequencyComponent @ 14:12分析器错误：[let]中第45列的意外标记|，预期标识符，关键字或字符串频率频率;让我=索引| TagFrequencySorter：键： TagFrequencyComponent @ 14：12中的“方向”（“=”让频率为频率;让我=索引| TagFrequencySorter：key：direction“＆gt;

我没有在任何地方使用过UpperCase，也没有在sort.pipe中使用过。事实上，如果我从HTML行下面删除这个“let i = index”部分，那么对“word”列的排序也是有效的。但我需要这个“索引”来填充tagNames数组。

<tr *ngFor="let frequency of frequencies; let i = index | TagFrequencySorter: key: direction">

有人能告诉我如何摆脱这个问题？

提前致谢。

Angular 2管道：模板解析错误：TypeError：无法读取未定义的属性'toUpperCase'

0 个答案: