title: Display value for specific table row only in *ngFor
body: <p>I am trying to display a value for a specific table row however the value is getting displayed for every single row. I am using angular-data-tables.</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;tr *ngFor="let item of mf.data; let i=index" (click)="getCustomerAccounts(item)"&gt;
      &lt;td&gt;{{i+1}}&lt;/td&gt;
      &lt;td&gt;{{item.href}} 
        &lt;tr&gt;
          &lt;div class="card" *ngIf="msgFound"&gt;
            &lt;div class="card-body"&gt;
              {{msgFound}}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/tr&gt;
      &lt;/td&gt; 
  &lt;/tr&gt;
  </code></pre>
  
  <p>So the msgFound value is getting repeated in every row. Here is a screen shot of the problem
  <a href="https://i.stack.imgur.com/APG5k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/APG5k.png" alt="enter image description here"></a></p>
  
  <p>The code which generates msgFound looks like this. It basically allows the user to click on a row and if the row value matches a value in a JSON file then msgFound or msgNotFound is assigned a value. </p>
  
  <pre><code>  getBillingCycles() {
      this.BillingCyclesService.getBillingCycles()
      .subscribe((data: any) =&gt; {
        this.billingLink = data;
        this.billing = data._links.self;
      });
    }
  
    getCustomerAccounts(selectedItem: any) {
      this.CustomerAccountsService.getCustomerAccounts()
      .subscribe((data: any) =&gt; {
        this.customerAccounts = data;
        this.customerAccounts._embedded.accountList.forEach(longLink =&gt; {
            if (longLink.link.href.indexOf(selectedItem.href) != -1) {
              this.msgFound = longLink.accountNumber;
            } else {
              this.msgNotFound = 'No match for ' + selectedItem.href
            }
        });
      });
    }
  </code></pre>