Question

我有一个带日期选择器的表格。在输入数据的某些天，将显示其他字段。例如

<div *ngIf="ticketDate.getDay() === 0"

在此div内，我将绑定到模型上的一些可选属性。但是，如果用户在输入数据后将日期选择器更改为其他日期，则div的内容将不再可见，但属性仍在我的模型上设置。

是否有一种惯用的方法来解除绑定*ngIf内为假的属性？

Answer 1

您可以在#myDiv元素上设置模板引用变量div：

<div #myDiv *ngIf="ticketDate.getDay() === 0">

，并通过ViewChildren和QueryList.changes事件监视元素的存在。从DOM中删除div时，可以重置模型属性：

@ViewChildren("myDiv") myDivList: QueryList<ElementRef>;

value1: string;
value2: string;
value3: string;

constructor(private changeDetectorRef: ChangeDetectorRef) { }

ngAfterViewInit() {
  this.myDivList.changes.subscribe((list) => {
    if (!list.length) {
      this.value1 = undefined;
      this.value2 = undefined;
      this.value3 = undefined;
      this.changeDetectorRef.detectChanges();
    }
  });
}

有关演示，请参见this stackblitz。调用方法ChangeDetectorRef.detectChanges可以防止Angular异常。

Answer 2

您说您正在使用表单，如果您使用b，则显然是模板驱动的表单。您只能使用//create List to hold number of ints which are in solution List<int> solutions = multiples.Where((x) => b.All((y) => y % x == 0)).ToList();，而不能使用ngModel。这样就无需重置值。如果模板的一部分不可见，则它将完全不包含在表单中。如果那是一个合适的选项，我建议以下内容（演示是ConnorsFan的stackblitz的修改版本）：

[(ngModel)]

根据需要并在所需的结构中命名（所有）表单字段，以便在提交表单时，表单对象与所需的模型相对应。因此，以上提交的表单值将是（如果条件为真）：

ngModel

演示：https://stackblitz.com/edit/angular-sxwbsd?file=src%2Fapp%2Fapp.component.html

PS：如果您有时需要在ts文件中引用该表格，则可以使用<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)"> <div *ngIf="ticketDate.getDay() === 0"> Value1: <input ngModel name="value1"> Value2: <input ngModel name="value2"> </div> <button type="submit">Submit</button> </form>，如演示中所示。

ngIf中的Angular 2+解除绑定属性

2 个答案: