Angular 如何仅获取传入可观察对象中的字段？

我有一个可观察的，我使用如下

...
const id = 1337;
this.service.getThing(id).subscribe(
  suc => doSomething(suc.name),
  err = doSomethingElse()
);

自从我开始使用异步管道以来，我做的大部分观察都是这样的

thing$: Observable<Thing>;
...
ngOnInit(){
  this.thing$ = this.service.getThing(1337);
}

thing$：可观察；
...
恩戈尼尼特（）{
this.thing$=this.service.getThing（1337）；
}

我可以在HTML中使用结果，如下所示，但我很好奇是否可以声明一个操作，当实现时，该操作从observable获取值，并且只选择某个字段

<div *ngIf="thing$ | async as thing>
  {{thing.name}}
</div>

您可以使用RxJS操作符来实现：

从'rxjs/operators'导入{map}；
thingName$：可观察；
恩戈尼尼特（）{
this.thingName$=this.service.getThing（1337.pipe）（map（thing=>thing.name））；
}

您可以使用RxJS操作符来实现：

从'rxjs/operators'导入{map}；
thingName$：可观察；
恩戈尼尼特（）{
this.thingName$=this.service.getThing（1337.pipe）（map（thing=>thing.name））；
}

另一个选项来自rxjs库

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductService } from '../shared/product.service';
import { pluck } from 'rxjs/operators';

@Component({
    selector: 'app-product',
    template: `<div *ngIf="productName$ | async as productName">
          {{productName}}
        </div>`,
    styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
    productName$: Observable<string>;

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productName$ = this.productService.getProduct(1).pipe(pluck('productName'));
    }

}

另一个选项来自rxjs库

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductService } from '../shared/product.service';
import { pluck } from 'rxjs/operators';

@Component({
    selector: 'app-product',
    template: `<div *ngIf="productName$ | async as productName">
          {{productName}}
        </div>`,
    styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
    productName$: Observable<string>;

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productName$ = this.productService.getProduct(1).pipe(pluck('productName'));
    }

}

我的尝试很接近。出于某种原因，我使用了带有大写字母的地图。。。然后我放弃了。我的尝试离我太近了。出于某种原因，我使用了带有大写字母的地图。。。然后我放弃了。是为@connersfan建议的映射提取语法糖，还是有更深入的内容？（所以我知道我是应该去文档阅读，还是只使用我最喜欢的任何一个。）文档这样描述它：就像地图一样，但只用于拾取每个发射对象的一个嵌套属性。因此，我认为称之为语法糖是一个很好的选择。是为@connersfan建议的映射提取语法糖，还是有更深入的内容？（所以我知道我是应该去文档阅读，还是只使用我最喜欢的任何一个。）文档这样描述它：就像地图一样，但只用于拾取每个发射对象的一个嵌套属性。所以，我认为称之为语法糖是一个很好的选择。