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

Question

我试图显示不过是越来越显示每一行的值的特定表行的值。我使用的角度，数据表。

这里是我的代码

<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

你想在这里做的是设置你的索引。要做到这一点最简单的方法将需要从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 2

如果定义msgFound这样，数据表不知道是怎么回事就必须显示。我们必须用简单的逻辑了点。

首先改变你的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变量类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 datatables

Answer 3

既然你只使用一个密钥msgFound它不能区分哪些item应显示。如果您应该限制在一个特定的行而已，一定是有逻辑比分扳成item。

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。你可以做一个简单的如果。

HTML：用Let的I 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;
  }
}