Angular 2+ - анализирует данные json и выводит только отдельные данные

Question

У меня есть этот код, который анализирует JSON и перечисляет данные в таблицу, используя ngFor.

Результат будет как.

Да, запись данных в таблицу работает нормально.

Но как я могу реализовать его для вывода отдельных данных с определенным идентификатором?

Например, я хочу, чтобы имя id = 3 было на выходе «Эдвард».

Я не могу понять, как это сделать. Может ли кто-нибудь помочь мне или направить меня?

Спасибо.

приложение-components.ts

import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    private data;

    constructor(private http:Http){
    }

    ngOnInit(){
        this.getData();
    }

    getData(){
        this.http.get('/localhost/data.json')
                .subscribe(res => this.data = res.json());
    }

}

приложение-component.html

<table>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <tr *ngFor="let info of data">
        <td>{{info.id}}</td>
        <td>{{info.name}}</td>
        <td>{{info.amount}}</td>
    </tr>
</table>

data.json

[  
   {  
      "id":"1",
      "name":"John",
      "amount":"112"
   },  
   {  
      "id":"2",
      "name":"Maria",
      "amount":"44"
   },  
   {  
      "id":"3",
      "name":"Edward",
      "amount":"40"
   }
]

Пожалуйста, скажите мне, что я предоставляю достаточную информацию или нет.

Answer 1

Вместо добавления директивы *ngIf, почему бы вам не создать компонент отдельно для вывода только одной строки таблицы?

Например: table.component.html будет иметь:

<table>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>{{info.id}}</td>
        <td>{{info.name}}</td>
        <td>{{info.amount}}</td>
    </tr>
</table> 

и table.component.ts будут иметь:

@Input() info : any;

Теперь вы можете перебрать <app-table [info]='info'></app-table> внутри app-component.html, также вы можете просто пропустить <app-table [info]='info[3]'></app-table>.

Answer 2

Вы можете использовать <ng-container> для того же самого, это нужно использовать, потому что вы не можете применить две директивы к одному элементу, как мы используем *ngIf и *ngFor.

<table>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <ng-container *ngFor="let info of data">
    <tr *ngIf='info.id == 3'>
        <td>{{info.id}}</td>
        <td>{{info.name}}</td>
        <td>{{info.amount}}</td>
    </tr>
    </ng-container>
</table >

рабочий пример