Html 如何在Angular 2中按id获取.json对象？

在从下拉列表中选择一个项目后，我试图通过id从JSON文件中获取对象。到目前为止，我已经成功地从JSON中检索到所有对象，但不是通过ID

Typescript

showInfo（）{
选择的var=this.diadikasies.filter（x=>x.content）；
console.log（选中）；
}

HTML

请选择：
Επιλέξτε Διαδικασία
{{diad.title.rendered}

---

提前感谢。

您可以同时使用ngModel和ngModelChange来获得所选值

<select #proc [(ngModel)]="selectedObj" (ngModelChange)="showInfo()">

您可以像下面这样使用

find（）

方法

TS文件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  description;

  opts = [{
    id: 1,
    name: 'Test 1',
    description: 'This is Test 1 description'
  }, {
    id: 2,
    name: 'Test 2',
    description: 'This is Test 2 description'
  }];

  showInfo(value) {
    let selectedOpt = this.opts.find(opt => opt.id == value);
    this.description = selectedOpt.description;
  }
}

<div *ngIf="opts && opts.length > 0" class="form-group">
    <label for="opts">
        <i class="fas fa-clipboard-list" aria-hidden="true"></i> Please Select: </label>
    <select #proc (change)="showInfo(proc.value)">
        <option [ngValue]="undefined" disabled selected>Επιλέξτε Διαδικασία</option>
        <option *ngFor="let diad of opts" [value]="diad.id">{{ diad.name }}</option>
    </select>
</div>
<div>{{ description }}</div>

模板文件中的

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  description;

  opts = [{
    id: 1,
    name: 'Test 1',
    description: 'This is Test 1 description'
  }, {
    id: 2,
    name: 'Test 2',
    description: 'This is Test 2 description'
  }];

  showInfo(value) {
    let selectedOpt = this.opts.find(opt => opt.id == value);
    this.description = selectedOpt.description;
  }
}

<div *ngIf="opts && opts.length > 0" class="form-group">
    <label for="opts">
        <i class="fas fa-clipboard-list" aria-hidden="true"></i> Please Select: </label>
    <select #proc (change)="showInfo(proc.value)">
        <option [ngValue]="undefined" disabled selected>Επιλέξτε Διαδικασία</option>
        <option *ngFor="let diad of opts" [value]="diad.id">{{ diad.name }}</option>
    </select>
</div>
<div>{{ description }}</div>

请选择：
Επιλέξτε Διαδικασία
{{diad.name}
{{description}}

---

您可以从这里找到工作示例

它不应该是

x.id==this.selectedObj.id

中的

过滤器

？非常感谢。事实上，这非常简单，尽管我没有想到find（）。