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

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

结果会是这样

是的，将数据列在表中工作正常

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

例如，我想要id=3的名称，输出应该是“Edward”

我不知道该怎么做。有人能帮助我或指引我吗

谢谢

应用程序组件。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());
    }

}

app 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>

请告诉我我是否提供了足够的信息。

您可以使用

同样，这必须使用，因为您不能像我们使用

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

#
名称
数量
{{info.id}
{{info.name}
{{info.amount}

同样，您可以使用

，这是必须使用的，因为您不能像我们使用的

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

#
名称
数量
{{info.id}
{{info.name}
{{info.amount}

---

与其添加

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

#
名称
数量
{{info.id}
{{info.name}
{{info.amount}

和

表.component.ts

将具有：

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

@Input（）info:any

现在，您可以在
app component.html中循环
，也可以传递
而不是添加
*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> 


#
名称
数量
{{info.id}
{{info.name}
{{info.amount}

和
表.component.ts
将具有：

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

@Input（）info:any

现在，您可以在
app component.html中循环查看
，也可以只传递
，这样在选择时，您就不需要输入或下拉列表，例如，将该id的信息打印到另一个div？我只想显示特定id的数据。因此，在选择时，您不想在列表中输入或下拉列表，而是将该id的信息打印到另一个div。例如，我只想显示特定id的数据。谢谢！这是否可以用于后端，比如只将id=3的名称存储到变量x中？是的，您需要将id=3的值分配到容器中。我的意思是将id=3的“name”的值分配到某个变量中。但是不要展示它。是的，你可以！！但是你没有明白你想做什么。更新您的问题或询问新问题！这是否可以用于后端，比如只将id=3的名称存储到变量x中？是的，您需要将id=3的值分配到容器中。我的意思是将id=3的“name”的值分配到某个变量中。但是不要展示它。是的，你可以！！但是你没有明白你想做什么。更新您的问题或提出新问题