我有多個 cdkDropLists，我將專案從一個拖放到另一個。但是，我希望其中一個隱藏在某些條件下，由我的 Angular 組件的 .ts 檔案中的函式定義。
下面介紹了我想要如何執行此操作的 HTML 代碼片段：
<div
cdkDropList
#weisen="cdkDropList"
[cdkDropListData]="weisenList"
[cdkDropListConnectedTo]="[playerThreeHand]"
class="horizontal weisen"
*ngIf="isFirstRound()"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let card of weisenList">
<img class="horizontal_card" src="assets/french_cards/{{card.cardID}}.svg" cdkDrag>
</div>
</div>
然而，這個 cdkDropList 被另一個 cdkDropList 參考：
<div
cdkDropList
#playerThreeHand="cdkDropList"
[cdkDropListData]="playerThreeHandList"
[cdkDropListConnectedTo]="[cardsOnTable, weisen]"
class="horizontal bottom"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let card of playerThreeHandList">
<img class="horizontal_card" src="assets/french_cards/{{card.cardID}}.svg" cdkDrag>
</div>
</div>
沒有 ngIf，代碼編譯；但是當添加 ngIf 屬性時，會彈出以下錯誤訊息：
Error: src/app/game/game.component.html:83:50 - error TS2551: Property 'weisen' does not exist on type 'GameComponent'.
83 [cdkDropListConnectedTo]="[cardsOnTable, weisen]"
~~~~~~
src/app/game/game.component.ts:9:16
9 templateUrl: './game.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component GameComponent.
uj5u.com熱心網友回復：
問題是當條件不滿足時，您的第一個組件ngIf不存在isFirstRound()，因此無法參考。
而不是*ngIf="isFirstRound()"您可以嘗試[hidden]="!isFirstRound()"使該元素仍然存在，但僅在以后的回合中隱藏。
uj5u.com熱心網友回復：
您可以嘗試使用@ViewChild
<div
cdkDropList
#weisenElement
[cdkDropListData]="weisenList"
[cdkDropListConnectedTo]="[playerThreeHand]"
class="horizontal weisen"
*ngIf="isFirstRound()"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let card of weisenList">
<img class="horizontal_card" src="assets/french_cards/{{card.cardID}}.svg" cdkDrag>
</div>
</div>
零件
@ViewChild("weisenElement",{read:CdkDroplist}) //or whatever that is exporeted as `cdkDropList`
public weisen:CdkDroplist; change any to the proper type
請記住，這wesien是可以為空的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/524410.html