如何在Angular 2中通过ID获取.json对象?

时间:2018-08-22 12:41:48

标签: html angular typescript filter id

从下拉列表中选择一个项目后,我试图通过ID从JSON文件获取对象。到目前为止,我已经设法从JSON检索了所有对象,但没有按ID检索。

打字稿

<?php
              $userobject = $_SESSION[CATS];

              $id = $userobject->getUserID();


?>

HTML

showInfo() {
    var selected = this.diadikasies.filter(x=> x.content);
    console.log (selected);
}

谢谢。

2 个答案:

答案 0 :(得分:0)

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

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

和showInfo方法中

 var selected = this.diadikasies.filter(x=> x.id == this.selectedObj.id);

答案 1 :(得分:0)

您可以使用下面的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>

您可以在这里Stackblitz

找到工作示例