动态绑定属性

Question

我有这个模板

<div [fromGroup]="myForm">
 <input [formControl]="myFormControl" [formControlName]="formControlName">
</div>

我在想我能不能把其中一个绑起来。例如，如果formControl有数据，我想这样做。

<div>
 <input [formControl]="myFormControl">
</div>

但是，如果formControl为空，我想这样做：

<div [fromGroup]="myForm">
 <input [formControlName]="formControlName">
</div>

有没有一种方法可以在没有ngIf的情况下动态绑定相同模板上的属性

Answer 1

使用ngIf。查看下面的链接，

Angular NgIf

Answer 2

您可以尝试执行以下操作：

 <div [fromGroup]="formControl?null:myForm">
    <input [formControl]="formControl? [formControlName]="formControl? 
    null:formControlName">
    </div>

Answer 3

您可以利用*ngIf中的then-clause和else-clause表示法，在条件为true或false时显示一个或多个块，如here所示。假设formControl由真实值初始化，则呈现trueBlock，当formControl不是由null或undefined初始化时，则呈现falseBlock：

<div *ngIf="formControl; then trueBlock; else falseBlock"></div>
<ng-template #trueBlock>
  <div>
    <input [formControl]="myFormControl">
  </div>
</ng-template>
<ng-template #falseBlock>
  <div [fromGroup]="myForm">
    <input [formControlName]="formControlName">
  </div>
</ng-template>