Angular 仅在*ngFor中显示特定表格行的值

我试图为特定的表行显示一个值，但是每个行都会显示该值。我使用的是角度数据表

这是我的密码

<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>

---

由于您仅使用一个键

msgFound

，因此无法区分应显示哪个

项。如果您应该仅将其限制为特定的行，则必须有一些逻辑将其与
项关联起来。要做到这一点，最简单的方法是将html中的索引提供给组件：

（单击）=“getCustomerAccounts（项目，i）”

在您的组件中，类似于：

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};
  }

现在，您需要对html进行一些更改：

<div class="card-body" *ngIf="msgFound !== undefined && i === msgFound.index">
  {{msgFound.value}}
</div>


{{msgFound.value}
如果这样定义msgFound，datatable不知道它必须显示的行是什么。
我们必须使用简单的逻辑

首先更改getCustomerAccounts方法，如下所示

 getCustomerAccounts(item : any ,i: 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.mf.data[i].msgFound  = longLink.accountNumber;
                 } else {
                      this.msgNotFound = 'No match for ' + selectedItem.href
                 }
            });
         });
       }

<tr *ngFor="let item of mf.data; let i=index" (click)="getCustomerAccounts(item,i)">
<td>{{i+1}}</td>
<td>{{item.href}} 
  <tr>
    <div class="card" *ngIf="item.msgFound">
      <div class="card-body">
        {{item.msgFound}}
      </div>
    </div>

    <div class="card" *ngIf="!item.msgFound">  <--! to proper format table. otherwise table will not align-->
      <div class="card-body">
        -
      </div>
    </div>

  </tr>
</td> 

如果您已经为mf.data变量创建了类，请将msgFound属性也添加到该类中

然后按如下方式更改html代码

 getCustomerAccounts(item : any ,i: 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.mf.data[i].msgFound  = longLink.accountNumber;
                 } else {
                      this.msgNotFound = 'No match for ' + selectedItem.href
                 }
            });
         });
       }

<tr *ngFor="let item of mf.data; let i=index" (click)="getCustomerAccounts(item,i)">
<td>{{i+1}}</td>
<td>{{item.href}} 
  <tr>
    <div class="card" *ngIf="item.msgFound">
      <div class="card-body">
        {{item.msgFound}}
      </div>
    </div>

    <div class="card" *ngIf="!item.msgFound">  <--! to proper format table. otherwise table will not align-->
      <div class="card-body">
        -
      </div>
    </div>

  </tr>
</td> 


{{i+1}}
{{item.href}
{{item.msgFound}
-


角度数据表中有内置的高级选项。
请参考此url:
似乎您可以使用一个局部变量，单击该变量将切换
msgFound
属性，您是否可以检查下面的stackblitz，如果它对您有帮助的话

<table>
<tr *ngFor="let item of data; let i=index; let display = false;" (click)="display = true;">
    <td>{{i+1}}</td>
    <td>{{item.href}} 
      <tr>
        <div class="card" *ngIf="item.msgFound && display">
          <div class="card-body">
            {{item.msgFound}}
          </div>
        </div>
      </tr>
    </td> 
</tr>
</table>


{{i+1}}
{{item.href}
{{item.msgFound}

在对行id应用后，只需检查要显示值的行在数组中的位置即可。你可以用一个简单的if

HTML：使用let i=index中的i

*ngif(check(i))

TS：只需检查row.id是否等于要使用的行

check(i){ 
if(i == 4) {
return true;
}
return false; 

这是密码

HTML:

您希望在什么条件下限制
msgFound
可见性？很抱歉，当用户单击某行时，它将向msgFound呈现一个值。因此，我只希望单击的行显示值。我将用更多信息编辑我的问题。我正在获取undefined@skydev编辑示例。这是因为您尚未设置msgNotFound
*ngIf=“msgFound！==undefined&&i===msgFound.index”
它将在单击后设置。它不再给出错误，但当我单击具有匹配数据的行时，它不会做任何事情。我看到现在可能需要的差异
this.msgFound={value:'No match for'+selectedItem.href，index:index}
或通过添加来编辑html:
{{{msgNotFound.value}
您可能会单击一个触发msgNotFound的按钮，然后什么也不会显示。
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = [
    {href: "adsfasdfasdf", msgFound: "asdfasdfasdf"},
    {href: "asdfasdf", msgFound: "asdfasdf"},
    {href: "adsfasdfazxcvzxcvsdf", msgFound: "zxcvzxcv"},
    {href: "adsfasdfaszxcvzxdf", msgFound: "asdfaszxcvzxcvdfasdf"},
    {href: "adfdhdfghsfasdfasdf", msgFound: "asdfasdfadhgfhsdf"}, 
  ];

  check(i){
    if(i === 3) {
      return true;
    }
    return false;
  }
}