仅在 *ngFor 中显示特定 table 行的值

Question

我正在尝试为特定 table 行显示一个值，但是该值正在为每一行显示。我正在使用 angular-data-tables.

这是我的代码

<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 值在每一行中重复出现。这是问题的屏幕截图

生成 msgFound 的代码如下所示。它基本上允许用户单击一行，如果行值与 JSON 文件中的值匹配，则为 msgFound 或 msgNotFound 分配一个值。

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

Answer 1

由于您只使用一个键 msgFound，因此无法区分应显示哪个 item。如果您应该将其限制为仅特定行，则必须有一些逻辑将其绑定到 item.

Answer 2

您在这里要做的是设置您的索引。最简单的方法是将 html 中的索引提供给您的组件：

(click)="getCustomerAccounts(item, 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>

Answer 3

如果你这样定义 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
                 }
            });
         });
       }

如果您已经为 mf.data 创建了 class 变量，也为其添加 msgFound 属性。

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

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

angular 数据表中有内置的高级选项。参考这个 url : Angular datatables

Answer 4

好像你可以有一个局部变量，点击时会切换 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>

StackBlitz

Answer 5

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

HTML：使用 let i = index

的 i

*ngif(check(i))

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

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

这里是代码

HTML:

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

TS:

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

仅在 *ngFor 中显示特定 table 行的值

Display value for specific table row only in *ngFor

angular-datatables

angular