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上看起来像这样: 哪个错了.我只需要前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 [] = []; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |