Как получить только поле во входящей наблюдаемой? - PullRequest
Новая
       6

Как получить только поле во входящей наблюдаемой?

0 голосов
/ 12 января 2020

У меня есть наблюдаемое, которое я использую следующим образом. 

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

Так как я начал использовать асин * c трубу, я делаю большинство своих наблюдаемых, как это. 

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

Я могу использовать результат в HTML, как показано ниже, но мне любопытно, можно ли объявить операцию, которая, когда она реализована, получает значение из наблюдаемого и выбирает только определенное поле. 

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

Я бы хотел получить доступ только к имени, вместо того, чтобы вытащить его из вещи.

Я пытался поиграться с pipe (...) , потому что моё подозрение говорит мне, что в этом что-то есть. Я не заставил это работать, хотя и потерял уверенность, так как я даже не уверен, что это приемлемый подход.

Ответы [ 2 ]

1 голос
/ 12 января 2020

Другой вариант - pluck из библиотеки rx js. 

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

}

В этом примере извлекается имя продукта из продукта, возвращенного из службы продукта. 

export interface Product {
    id: number;
    productCode: string;
    productName: string;
}
1 голос
/ 12 января 2020

Для этого вы можете использовать оператор Rx JS map : 

import { map } from 'rxjs/operators';

thingName$: Observable<string>;

ngOnInit(){
  this.thingName$ = this.service.getThing(1337).pipe(map(thing => thing.name));
}

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