javascript - Angular 6 Typescript从数组中提取元素并进行比较

Question

我有这个组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-workers-edit',
  templateUrl: './workers-edit.component.html',
  styleUrls: ['./workers-edit.component.css']
})
export class WorkersEditComponent implements OnInit {
  public workerid;
  public lastname;
  public address;
  public phone;
  public email;

  workers = [];

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

  ngOnInit() {
    let id = parseInt(this.route.snapshot.paramMap.get('id'));
    this.workerid = id;

    let Workerobs = this.http.get('http://myurlPP/cfcs/workernameapi.cfm');
    Workerobs.subscribe((res:any)=> {
      console.log(res);
      this.workers = res;

    });

  }

}

在此之后的 workers 数组包含以下内容:

在我的 html 中，如果我这样做:

<ul>
    <li *ngFor="let name of workers">{{name.WNAME}}</li>
</ul>

我将从数组中获取所有名称并显示它们，这没问题。

但我只需要显示具有匹配 workerid 的名称。 (我有 workerid 因为 let id = parseInt(this.route.snapshot.paramMap.get('id')); this.workerid = id;

那么如何从 workers 数组中提取 WID，将其与 workerid 进行比较，如果为真，则仅显示 WNAME( worker 姓名) ?

Answer 1

您可以在subscribe 函数中过滤您的数组

Workerobs.subscribe((res:any)=> {
    console.log(res);
    this.workers = res.filter(item => item.WID === this.workerid);
});

也许 filter 函数中的属性名称会出现错误类型，因此请根据您的情况进行调整。