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

【问题标题】：Angular 6 Typescript extract element from array and compareAngular 6 Typescript 从数组中提取元素并进行比较
【发布时间】：2018-08-27 12:20:08
【问题描述】：

我有这个组件：

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（工人姓名） ?

【问题讨论】：

你不能只用 res.filter(......) 在 Workerobs.subscribe 方法中过滤吗？？
不使用过滤器或 *ngFor，使用 find 和变量 this.myuser=workers.find(w=>w.id==id);

标签： javascript arrays angular typescript

【解决方案1】：

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

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

filter 函数中的属性名称可能会是错误类型，因此请根据您的情况调整它们。

【讨论】：

这行得通！但是您能解释一下 item 是如何知道要引用什么的吗？我不太明白这是如何工作的
我们传递一个箭头函数给它。 filter 函数将遍历 res 中的所有项目并应用像 myPassedFunction(res[i]) 这样的传递函数。传递的参数将在函数中显示为item

【解决方案2】：

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);
    });

  }

您需要做的就是像上面那样过滤工人数组。

【讨论】：

【解决方案3】：

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

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

这应该可以帮助您解决问题。请询问是否需要对功能进行任何更改。

【讨论】：

【解决方案4】：

您也可以在您的 UI 中干净地做到这一点，只需添加一个 *ngIf="condition" ：

<ul>
   <li *ngIf="worker.WID == workerid" *ngFor="let worker of workers">{{worker.WNAME}}</li>
</ul>

【讨论】：

【解决方案5】：

如果您知道 Worker 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'
      }
    });

【讨论】：