Question

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

当我在console中进行订阅时，我会检索该数组的值，但是（我是初学者）很难设置该数组中对象的属性之一。

组件：

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

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

从评论中：

... IDE表示类型'Object'上不存在属性'map'。会不会是一个错误

关于您的服务。确保返回类型上的签名正确。这是一个示例，您还可以定义一个接口并返回它，而不是返回{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');
  }
}

Answer 2

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

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

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

3 个答案: