Angular 2+ - 解析json数据并仅输出单个特定数据

Question

我有这个代码，它使用ngFor解析JSON并将数据列入表中。

结果就像。

是的，将数据列入表格工作正常。

但是如何实现它来输出特定ID的单个数据？

例如 - 我希望id = 3的名称输出应该是＆＃34; Edward＆＃34;。

我无法弄清楚如何做到这一点。有人可以帮助我或指导我吗？

感谢。

应用-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

你可以使用<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 >

working example

Answer 2

为什么不单独创建一个组件而只输出一个表行，而不是添加*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>。