创建具有对象属性的变量 - Angular答案

【问题标题】：Create a Variable with an Object Property - Angular创建具有对象属性的变量 - Angular
【发布时间】：2019-03-04 15:49:13
【问题描述】：

我正在尝试创建一个变量来设置通过 get 方法获得的对象的属性之一。

当我在订阅中提供控制台时，我检索了数组的值，但我很难（我是初学者）只设置该数组中对象的一个属性。

组件：

this.mainService.getGraph()
    .subscribe(res => {
      console.log(res) 
      this.name = res[''].map(res => res.name)
      console.log(this.name)

Console.log：

(5) […]

0: Object { name: "Carlos", lastname: "Moura", participation: 5 }

1: Object { name: "Fernanda", lastname: "Oliveira", participation: 15 }

2: Object { name: "Hugo", lastname: "Silva", participation: 20 }

3: Object { name: "Eliza", lastname: "Souza", participation: 20 }

4: Object { name: "Anderson", lastname: "Santos", participation: 40 }

length: 5

<prototype>: Array []
main.component.ts:26:6
ERROR TypeError: "res[''] is undefined"
    ngOnInit main.component.ts:27
    RxJS 13
    Angular 8

【问题讨论】：

this.name = res[0].name;? name 分配给返回数组中第一个对象的字段name。
您能否更具体地说明您要更改/添加的用户对象的哪个属性？您想为“this.name”赋予什么价值？
预期的对象结构是什么？
我需要选择所有数组名称。因为有了这些名字，我将创建一个带有结果的圆环图

标签： javascript angular typescript

【解决方案1】：

您正在将传入函数中的res 重新定义为map。
使用name 到names 的复数形式，您需要一个字符串数组，这样复数形式更合适并传达字段包含的内容。
不要尝试访问 res 上不存在的字段或索引，您的 res[''] 不正确。
我将调用置于ngOnInit，它可能位于其他位置，但这允许我在其上方定义分配的变量成员。

names: string[];

ngOnInit() {
    this.mainService.getGraph()
      .subscribe(res => {
        console.log(res);
        this.names = res.map(_ => _.name);
        console.log(this.names);
}

来自cmets：

...IDE 说“对象”类型上不存在属性“地图”。会不会只是一个错误

关于您的服务。确保返回类型上的签名正确。这是一个示例，您还可以定义一个接口并返回它而不是 {name:string}（但保留表示返回数组的 []）。

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

export class MainService {
  constructor(private readonly http: HttpClient){}

  getGraph() : Observable<{name: string}[]> {
    return this.http.get<{name: string}[]>('/some/url');
  }
}

【讨论】：

完美！有效。但是，IDE 说“对象”类型上不存在属性“地图”。这只是一个错误吗？
@FelipeNoka - 确保mainService.getGraph 的签名返回Observable<{name: string}[]>。您可以将{name: string} 替换为自定义接口或类型。

【解决方案2】：

只需使用res.map(res => res.name)。而不是res[''].map(res => res.name)。在您的情况下，您尝试使用等于对象内部空字符串的键访问属性，但它不存在

【讨论】：

没有 [] 表示对象中不存在属性“地图”

【解决方案3】：

可以直接在http get方法中进行

this.http.get(url).pipe(
 map(res => {
   res['newProperty'] = 'value';
   return res;
 })
);

即使你只想回调一个属性

this.http.get(url).pipe(
     map(res => {       
       return res.name;
     })
    );

【讨论】：