我正在從 NGXS 狀態調用數據，當我console.log()顯示該數據時，該數據以用于描述它的界面的形式存在。有一個items屬性是由 3 個對象組成的數組，我想在模板中對其進行迭代。但是，當我定位該items屬性時，我在 vsCode 中收到錯誤，告訴我該屬性在該類型上不存在，并且屏幕上不會呈現任何內容。我的狀態模型看起來像這樣export interface CattegoryIndexItem{ cattegory: string; products: ProductIndexListItem[];}export interface ProductIndexListModel{ items: CattegoryIndexItem[]; }我的組件看起來像這樣export class ProductPageComponent implements OnInit { @Select() productIndexState$: Observable<ProductIndexListModel>; constructor(private store: Store) {} ngOnInit(): void { this.store.dispatch(new GetProductIndexList()); } showData(){ this.productIndexState$.subscribe(res => console.log(res)); }}在我的模板內<article *ngFor="let item of productIndexState$.items | async"> <p>{{item.cattegory}}</p></article><button (click)="showData()">click</button>當頁面加載時我收到此錯誤錯誤 TS2339：“Observable”類型上不存在屬性“items”。我在使用可觀察量時從未遇到過這個問題，NGXS 是否做了一些事情讓我們需要以不同的方式訪問它？
2 回答
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
看起來像模板語法中的一個小故障 - 無法調用.itemsObservable 本身，您想在該對象發出的對象上調用它Observable。
所以你需要先Observable通過管道async，例如
<ng-container *ngIf="productIndexState$ | async as productIndexState">
<article *ngFor="let item of productIndexState.items">
<p>{{item.cattegory}}</p>
</article>
<button (click)="showData()">click</button>
</ng-container>
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
很高興給出的答案已經有幫助。
我想在這里回答你的評論，只是為了補充這個答案。
你問：現在是什么導致了這種情況發生？
現在發生的事情是這樣的：
您的方法showData()調用可觀察對象本身的訂閱并將其解包。這應該具有您的界面的結構。該接口具有 items 屬性。
模板中的異步管道
<article *ngFor="let item of productIndexState$.items | async">
<p>{{item.cattegory}}</p>
</article>
在另一個站點上并不針對可觀察本身，而是針對 items 屬性。這在這里還不存在，而且它也不是異步可以處理的有效可觀察值。
Angular 的異步管道的工作方式與 showData() 中的訂閱類似。它獲取可觀察對象中包裝的所有內容并使其可用于處理。
@Garth Mason 在他的回答中所做的是首先對可觀察對象調用 async 以“解開”它，并使用別名來給它一個正確的名稱（不帶 $）。展開的對象包含您正在查找的項目，現在可以通過 ngfor 對其進行迭代。
再次他的代碼以供更好的參考：
<ng-container *ngIf="productIndexState$ | async as productIndexState">
<article *ngFor="let item of productIndexState.items">
<p>{{item.cattegory}}</p>
</article>
<button (click)="showData()">click</button>
</ng-container>
只是對包裝您的標簽的 ng-container 的附加評論。Angular 只允許在標簽上使用單個指令，例如 ngFor 或 ngIf。因此，每當您需要在模板中執行兩個“Angular 流程步驟”時，您都需要執行第一步（此處的 ng-container），然后執行第二步的實際標簽 () 。ng-container 沒有標記，因此在 HTML 中不可見。這就是為什么包裝此類處理步驟是完美的;-)
- 2 回答
- 0 關注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消