如何在材料输入字段中使用*ngIf

Question

我有两次相同的输入。我想把第一个放在第一个箱子上，第二个放在第二个箱子上。如果我将*ngIf添加到我的材料输入中；垫子形式字段必须包含一个MatFormFieldControl&"；，但我在它后面有垫子输入(在ngIf之前也尝试过(

<mat-form-field appearance="legacy" [style.width.%]="45">
<mat-label>Phasenende</mat-label>
<input
*ngIf="this.projectPhases <= 1"
matInput
[min]="this.projectForm.controls['phases'].value[i].pStart"
placeholder="Ende"
[matDatepicker]="picker2"
formControlName="pEnd"
/>
<input
*ngIf="this.projectPhases > 1"
matInput
[min]="this.projectForm.controls['phases'].value[i-1].pEnd"
placeholder="Ende"
[matDatepicker]="picker2"
formControlName="pEnd"
/>
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

Answer 1

使用ng容器包装：

<mat-form-field appearance="legacy" [style.width.%]="45">
<mat-label>Phasenende</mat-label>
<!-- First case -->
<ng-container *ngIf="this.projectPhases <= 1">
<input matInput [min]="this.projectForm.controls['phases'].value[i].pStart" placeholder="Ende"       [matDatepicker]="picker2" formControlName="pEnd">
</ng-container>
<!-- Second case -->
<ng-container *ngIf="this.projectPhases > 1">
<input matInput [min]="this.projectForm.controls['phases'].value[i-1].pEnd" placeholder="Ende" [matDatepicker]="picker2" formControlName="pEnd">
</ng-container>
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

Answer 2

我认为这是因为this.projectPhases最初是"未定义的"；和：

• 未定义<=1->错误

• 未定义>1->错误

尝试使用默认值：

this.projectPhases = 0;

或将全部包裹在中

*ngIf="projectPhases"

Answer 3

对于错误错误：表格字段必须包含MatFormFieldControl此错误如果您已导入所有MatModules，然后检查你没有任何ngIf内部输入