Отображать значение только для определенной строки таблицы в * 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

Просто проверьте позицию в массиве строки, для которой вы хотите отобразить значение, после применения идентификатора строки.Вы можете сделать это с помощью простого if.

HTML: используйте i для let i = index

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

Answer 2

Похоже, у вас может быть локальная переменная, которая при нажатии переключит свойство 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 3

Что вы хотите сделать здесь, это установить свой индекс.Самый простой способ сделать это - передать индекс 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 4

Если вы определите 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 Переменная Добавьте к нему также атрибут 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> 

В угловых таблицах данных есть встроенные расширенные параметры.См. Этот URL: Угловые таблицы данных

Answer 5

Поскольку вы используете только одну клавишу msgFound, он не может определить, какой item должен отображаться.Если вам нужно ограничить его только определенной строкой, должна быть какая-то логика, чтобы связать его с item.