Javascript Angular 6 Typescript从数组中提取元素并比较

我有这个部分：

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>

{{name.WNAME}

我将从数组中获取所有名称并显示它们，这是可以的

但是我只需要显示带有匹配的

workerid

的名称。（我的workerid位于，因为

let id=parseInt（this.route.snapshot.paramMap.get（'id'）；this.workerid=id；

---

那么如何从workers数组中提取WID，将其与workerid进行比较，如果为真，则仅显示WNAME（worker name）？

您可以在

subscribe

函数中筛选数组

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

在

filter

函数中，属性名称可能会输入错误，因此请根据您的情况进行调整

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.filter((worker) => worker.id === this.workerid);
    });

  }

---

您只需按上述方法筛选workers数组。

执行以下代码，即可获得所需的功能：

<ul>
    <li *ngFor="let name of workers">
        <ng-container *ngIf="name.WID == this.workerid">{{name.WNAME}}</ng-container>
    </li>
</ul>

{{name.WNAME}}

---

这应该可以帮助您实现这一点。请询问是否需要对功能进行任何更改。

您也可以在

UI

中干净利落地进行更改，只需添加

*ngIf=“condition”

：

{{worker.WNAME}

如果您知道工人ID是唯一的，则应使用

find

而不是

filter

，因为它将返回数组中的第一个匹配项

  selectedWorker: any;

  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)=> {
      this.selectedWorker = res.find((worker) => worker.workerid === this.workerid);
      if (this.selectedWorker === undefined) {
         console.log('no worker with id:' + id + ' was found'
      }
    });

---

你不能用res.filter（……）在Workerobs.subscribe方法本身中进行筛选吗？不要使用筛选器或*ngFor，使用find和变量this.myuser=workers.find（w=>w.id==id）；这是可行的！但是你能解释一下item是如何知道引用什么的吗？我不太明白这是如何工作的。我们将一个箭头函数传递给它。

filter

函数将迭代

res

中的所有项，并应用传递的函数，如

myPassedFunction（res[I]）

类似于此。传递的参数将在函数中显示为

项

  selectedWorker: any;

  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)=> {
      this.selectedWorker = res.find((worker) => worker.workerid === this.workerid);
      if (this.selectedWorker === undefined) {
         console.log('no worker with id:' + id + ' was found'
      }
    });