Question

我正在尝试显示特定表行的值，但是每一行都显示该值。我正在使用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

您要在这里设置索引。最简单的方法是将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属性，是否可以检查下面的堆栈闪动，如果有帮助的话！

<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：使用让我的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中显示特定表行的值

5 个答案: