亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular:使用 NgIf 刪除組件、內部表單和元素?

Angular:使用 NgIf 刪除組件、內部表單和元素?

一只甜甜圈 2021-12-23 14:57:06
如何使用 *NgIf 或任何 Ng 函數刪除 Dom 元素和組件?我有一個下拉列表;根據下拉菜單,它將顯示不同的形式。當人員更改下拉類型然后稍后返回相同的下拉類型時 - 以前的表單數據仍然存在,何時應該清除。當下拉列表更改時刪除所有表單、變量和組件本身的最佳方法是什么?見下面的聲明,<div class = "addressformtotal">    <div class = "addressblock">        <app-address-formatheader-form></app-address-formatheader-form>        <div *ngIf="formatMessage?.addressFormatDescription.includes('Standard')"><app-address-mailing-standard-form></app-address-mailing-standard-form></div>        <div *ngIf="formatMessage?.addressFormatDescription.includes('Military')"><app-address-mailing-military-form></app-address-mailing-military-form></div>        <div *ngIf="formatMessage?.addressFormatDescription.includes('Post')"><app-address-mailing-pobox-form></app-address-mailing-pobox-form></div>        <div *ngIf="formatMessage?.addressFormatDescription.includes('Free')"><app-address-free-form></app-address-free-form></div>        <div *ngIf="formatMessage?.addressFormatDescription.includes('Rural')"><app-address-mailing-rural-form></app-address-mailing-rural-form></div>        <div *ngIf="formatMessage?.addressFormatDescription.includes('International')"><app-address-mailing-international-form></app-address-mailing-international-form></div>    </div>
查看完整描述

2 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

我認為你的內部組件(app-address-mailing-standard-form、app-address-mailing-military-form...)可以有一個關于 formGroup 和 *ngIf 的 @Input


@Input()group:FormGroup


<form *ngIf="group" [formGroup]="group">

    <input formControlName="prop1">

     ...

</form>

所以,你的 main.app 可以像


<app-address-formatheader-form 

         [group]="form.get("header")>

</app-address-formatheader-form>

<app-address-mailing-standard-form 

         [group]="form.get('mailing')">

</app-address-mailing-standard-form>

<app-address-mailing-standard-form 

         [group]="form.get('military')">

</app-address-mailing-standard-form>

...

所以,如果你的 main.app 創建像


this.form=new FormGroup({

   header:new FormGroup({...}),

   military:new FormGroup({...})

})

只顯示“header”和“military”,但這只是一個想法。一切都取決于您創建表單和表單組的方式和位置。


如果您在組件內部創建 fromGroup,請在輸入中使用 setter,例如


@Input() set visible(value)

{

    if (visible)

       this.group=new formGroup({...})

}

并且僅將“可見”作為參數傳遞


<app-address-formatheader-form [visible]="variable"></app-address-formatheader-form>

再次像這樣的形式


<form *ngIf="group" [formGroup]="group">

    <input formControlName="prop1">

     ...

</form>


查看完整回答
反對 回復 2021-12-23
?
PIPIONE

TA貢獻1829條經驗 獲得超9個贊

我會說使用反應式形式,以便您可以進行形式重置。這不是雙向綁定,因此您可以通過這種方式更好地控制數據。

因此,在下拉列表更改時,ngIf 將創建一個新的響應式表單,其中沒有數據。

在此處查看如何創建反應式表單

我對正在發生的事情的猜測是,您綁定了從共享組件(父組件)提供的數據,子組件由于雙向綁定而更改,因此保持不變。


查看完整回答
反對 回復 2021-12-23
  • 2 回答
  • 0 關注
  • 222 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號