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>