Rxjs는 행동 대상에 깊이 중첩 된 객체를 포함합니다

Question

이 영역에서 경험이 부족한 Rxjs의 BehaviorSubject로 게임을 시작합니다. 지금까지는 구성 요소에서 루트 수준 매개 변수를 가져올 수 있지만 중첩 된 개체에 액세스하면 '정의되지 않은 속성 x를 읽을 수 없습니다.'라는 결과가 발생합니다.

클래스 :

export class Basket extends X23Object { 
    public BasketId: number; 
    public UserID: number; 
    public User: User; 
    public BasketLines: BasketLine[] = []; 
} 

export class BasketLine extends X23Object { 
    public BasketLineId: number; 
    public BasketId: number; 
    public ProductId: number; 
    public Quantity: number; 
    public Product: Product; 
    public Price: number; 
    public Name: string; 
} 
export class Product extends X23Object { 
    public ProductId: number; 
    public CategoryId: number; 
    public Name: string; 
    public Code: string; 
    public Price: number; 
    public Details: string; 
    public Images: Image[]; 
    public Category: Category; 
} 

BasketBackendService

GetBasket() { 
    return this.authHttp.get(this.apiUrl + 'api/GetBasketByUser?id=' + parseInt(this.decodedJwt['userId']), { headers: contentHeaders }); 
} 

BasketService

private _lines: BehaviorSubject<BasketLine[]> = new BehaviorSubject([new BasketLine]); 
get getLines() { 
    return this._lines.asObservable(); 
} 
loadBasket() { 
    this.basketBackendService.GetBasket() 
     .subscribe(
      response => { 
       let lines = <BasketLine[]>response.json().basket.BasketLines; 

       this._lines.next(lines); 
      }, 
      error => console.log(error.text()) 
     ); 
} 

템플릿 (조각)

<tr *ngFor="let line of basketService.getLines | async"> 
    <td><img class="login-logo" src="{{ line.Product.Images[0].ThumbUrl }}" width="100%" /></td> 
    <td><a [routerLink]="['Product', { id: line.ProductId }]"> {{ line.Product.Code }} </a></td> 
    <td><a [routerLink]="['Product', { id: line.ProductId }]">{{ line.Product.Name }}</a></td> 
    <td class="text-right">{{ line.Price | currency:'GBP':true:'.2-2' }}</td> 
    <td class="text-center">{{ line.Quantity }}</td> 
    <td class="text-right">{{ line.Quantity * line.Price | currency:'GBP':true:'.2-2' }}</td> 
    <td><button (click)="DeleteLine(line.BasketLineId)">Remove</button></td> 
</tr> 

깊이 중첩 된 개체의 참조를 제거하면 예상되는 결과가 반환됩니다.

BehaviorSubject를 사용하여 여러 구성 요소를 업데이트하려고하지만 이것이 최상의 솔루션인지 확실하지 않습니다!

Answer 1

코드가 나에게 잘 어울립니다. "깊은 중첩"은 예를 들어 line.Product.Code을 의미합니다. line.Quantity과 작동하는 경우 문제는 BehaviorSubject이 아니라 데이터 구조에있을 가능성이 큽니다.

당신의 특별한 용도는 무엇인지 모르겠지만 BehaviorSubject이나 async 파이프를 전혀 사용할 필요가 없습니다.

BasketService를 들어 당신은 사용할 수 있습니다

이

export class BasketService { 
    lines: BasketLine[]; 

    // ... 

    loadBasket() { 
     this.basketBackendService.GetBasket().subscribe(
      response => { 
       this.lines = <BasketLine[]>response.json().basket.BasketLines; 
      }, 
      error => console.log(error.text()) 
     ); 
    } 
} 

그럼 그냥 그것을 렌더링 :

<tr *ngFor="let line of basketService.lines"> 
    // ... 
</tr>