Rxjs在behaviorsubject中包含深度嵌套的对象
Rxjs在behaviorsubject中包含深度嵌套的对象
提问于 2016-08-15 21:12:48
我开始在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来更新几个组件，但不确定这是否是最好的解决方案！
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-16 00:01:48
代码在我看来很好，我猜“深度嵌套”指的是例如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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38955755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号