angular - Display value for specific table row only in *ngFor
问题描述
I am trying to display a value for a specific table row however the value is getting displayed for every single row. I am using angular-data-tables.
Here is my code
<tr *ngFor="let item of mf.data; let i=index" (click)="getCustomerAccounts(item)">
<td>{{i+1}}</td>
<td>{{item.href}}
<tr>
<div class="card" *ngIf="msgFound">
<div class="card-body">
{{msgFound}}
</div>
</div>
</tr>
</td>
</tr>
So the msgFound value is getting repeated in every row. Here is a screen shot of the problem
The code which generates msgFound looks like this. It basically allows the user to click on a row and if the row value matches a value in a JSON file then msgFound or msgNotFound is assigned a value.
getBillingCycles() {
this.BillingCyclesService.getBillingCycles()
.subscribe((data: any) => {
this.billingLink = data;
this.billing = data._links.self;
});
}
getCustomerAccounts(selectedItem: any) {
this.CustomerAccountsService.getCustomerAccounts()
.subscribe((data: any) => {
this.customerAccounts = data;
this.customerAccounts._embedded.accountList.forEach(longLink => {
if (longLink.link.href.indexOf(selectedItem.href) != -1) {
this.msgFound = longLink.accountNumber;
} else {
this.msgNotFound = 'No match for ' + selectedItem.href
}
});
});
}
解决方案
What you want to do here is set your index. The easiest way to do this would require to give the index from the html to your component:
(click)="getCustomerAccounts(item, i)"
And in your component something like:
getCustomerAccounts(selectedItem: any, index: number) {
//http call and after
if (longLink.link.href.indexOf(selectedItem.href) != -1) {
this.msgFound = { value: longLink.accountNumber, index: index};
} else {
this.msgFound = { value: 'No match for ' + selectedItem.href, index: index};
}
Now you need a little change in your html:
<div class="card-body" *ngIf="msgFound !== undefined && i === msgFound.index">
{{msgFound.value}}
</div>
推荐阅读
- python - 从 N 名玩家中生成每场可能的比赛,并创建 N-1 组,每组 N/2 场比赛
- python - scikit-learn 似乎没有正确构建
- jekyll - Github 页面,使用 jekyll 隐藏两个 markdown 页面
- npm - pnpm 与 winrar。哪些方法可以更快地安装模块?
- typescript - 为什么 Vue 3 无法识别我的 Vuex 商店模块?
- python - 日期时间格式问题
- classloader - 使用 catalog.lookup 从函数转换返回值时发生 ClassCastException
- reactjs - 如何突出显示正在播放的当前歌曲
- html - 并排的单选按钮
- asp.net-mvc - 当类型是“字符串”但需要另一种类型(例如,GUID)时,如何在 Swashbuckle 中格式化字符串值?