慕哥9229398
2022-11-27 17:21:40
我的用例如下:我有一個(gè)返回?cái)?shù)組的函數(shù)我想有條件地渲染一個(gè)組件——如果一個(gè)數(shù)組存在并且它的長(zhǎng)度大于零。我想將這個(gè)返回的數(shù)組作為一個(gè)傳遞@Input()給這個(gè)組件。因?yàn)閿?shù)組的內(nèi)容是計(jì)算出來(lái)的,所以我不想調(diào)用這個(gè)函數(shù)兩次,因此使用 getter 也無(wú)濟(jì)于事。我嘗試了很多不同的方法,僅舉幾例:<order-list *ngIf="customer.getOrders() as orders && orders.length > 0" [orders]="orders" ></order-list>
<order-list *ngIf="(customer.getOrders() as orders) && orders.length > 0" [orders]="orders" ></order-list>
<order-list *ngIf="(customer.getOrders()) as orders && (orders.length > 0)" [orders]="orders" ></order-list>不幸的是我不斷收到一堆錯(cuò)誤:模板解析錯(cuò)誤:類型錯(cuò)誤:無(wú)法讀取未定義的屬性“toUpperCase”(“<div>解析器錯(cuò)誤:意外的標(biāo)記 &&、預(yù)期的標(biāo)識(shí)符、關(guān)鍵字或列中的字符串解析器錯(cuò)誤:第 23 列缺少預(yù)期的 )[錯(cuò)誤 ->]*ngIf="(customer.getOrders() 作為訂單) && orders.length > 0"這是一個(gè)有上述問(wèn)題的stackblitz 。
1 回答

心有法竹
TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊
我想出了一個(gè)解決方案。
我沒(méi)有在一個(gè)指令中使用邏輯連詞,而是用我的組件包裝了我的第一個(gè)條件,然后將另一個(gè)條件直接放在組件本身中,所以它仍然是兩個(gè)條件的 AND 并且它像一個(gè)魅力一樣工作,因?yàn)楦鶕?jù)文檔:*ngIf
<ng-container>
*ngIf
*ngIf
Angular <ng-container> 是一個(gè)分組元素,它不會(huì)干擾樣式或布局,因?yàn)?Angular 不會(huì)將它放在 DOM 中。
<ng-container *ngIf="customer.getOrders() as orders">
<order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list>
</ng-container>
Stackblitz與解決方案。
添加回答
舉報(bào)
0/150
提交
取消