加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 使用2种不同的* ngFor填充表格

发布时间:2020-12-17 17:32:47 所属栏目:安全 来源:网络整理
导读:下面是我的 JSON对象数组: { "tagFrequency": [ { "value": "aenean","count": 1,"tagId": 251 },{ "value": "At","tagId": 249 },{ "value": "faucibus",{ "value": "ipsum",{ "value": "lobortis","tagId": 194 },{ "value": "molestie",{ "value": "unde
下面是我的 JSON对象数组:

{
  "tagFrequency": [
    {
      "value": "aenean","count": 1,"tagId": 251
    },{
      "value": "At","tagId": 249
    },{
      "value": "faucibus",{
      "value": "ipsum",{
      "value": "lobortis","tagId": 194
    },{
      "value": "molestie",{
      "value": "unde tempor,interdum ut orci metus vel morbi lorem. Et arcu sed wisi urna sit egestas fringilla,at erat. Dolor nunc.","tagId": 199
    },{
      "value": "Vestibulum","tagId": 251
    }
  ]
}

我想显示这些属性即.表中的value,count和tagName(使用tagId获取).对于我使用ngFor的前两个属性.但是,我想打印tagName,我正在使用tagId并将其存储在tagNames数组中.以下是我的组件代码:

frequencies: any;
tagNames: string[] = [];

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): string {
    return this.tagService.getTag(tagId)
    .then(
        (response: any) => {
          this.tagNames.push(response.name)
        }
    )
    .catch(
      (error: any) => {
        console.error(error)
      }
    )
  }

这就是我试图在UI上打印它们的方式:

<table>
  <thead>
    <tr>
      <th>{{ 'word' }}</th>
      <th>{{ 'tag-name' }}</th>
      <th>{{ 'frequency' }}</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      <ng-container *ngFor="let name of tagNames">
        <tr *ngFor="let frequency of frequencies; let i=index">
          <td>{{ frequency.value }}</td>
          <td>{{ name }}</td>
          <td>{{ frequency.count }}</td>
        </tr>
      </ng-container>
  </tbody>
</table>

但我在列标签名下获得了[对象对象].有人可以帮我解决这个问题吗?

我尝试使用如上所述的ng-container,但结果在UI上看起来像这样:

tag-name-issue

哪个错了.我只需要前3行,标记名称分别为“Subtag 3”,“Zeit1”,“Tag 1”,分别为1,2,3行.

提前致谢.

解决方法

您可以使用索引变量,迭代* ngFor中的频率数组,并将其索引用于tagNames

<tr *ngFor="let frequency of frequencies; let i=index">
      <td>{{ frequency.value }}</td>
      <td>{{ tagNames[i] }}</td>
      <td>{{ frequency.count }}</td>
  </tr>

确保已初始化tagNames:

tagNames:string [] = [];

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读