javascript - 带有字符串值和 *ngIf 的 Angular 表单

Question

如果表单为空，我试图不在列表中显示表单。表单的值是字符串。我尝试使用 *ngIf 但它不起作用，我仍然可以在列表中看到空白位置。我该如何解决这个问题？（在图像中， ISRawMaterialInspection 和 ISRawMaterialRiskState 是空的。）

这是HTML：

<input matInput class="mt-20" formControlName="IsOxidizable" *ngIf="form.get('IsOxidizable').value"/>

    <input matInput class="mt-20" formControlName="ISRawMaterialInspection" *ngIf="!!form.get('ISRawMaterialInspection').value"/>
                        
    <input matInput class="mt-20" formControlName="ISRawMaterialRiskState" *ngIf="form.get('ISRawMaterialRiskState').value"/>

这是TS：

        IsOxidizable: new FormControl({
            value: this.data.IsOxidizable,
            disabled: true,
        }),
       
        ISRawMaterialRiskState: new FormControl({
            value: this.data.ISRawMaterialRiskState,
            disabled: true,
        }),
        ISRawMaterialInspection: new FormControl({
            value: this.data.ISRawMaterialInspection,
            disabled: true

标签： javascripthtmlcssangulartypescript

Answer 1

在Eliseo的一些评论输入后，我之前的答案需要一些编辑。

正如埃利塞奥所说

如果 a 等于 undefined、null、""、0 或 false，则打字稿中的 if(a) 条件为 false

    <input matInput class="mt-20" formControlName="IsOxidizable" *ngIf="form.get('IsOxidizable').value && form.get('IsOxidizable').value !== ''"/>

    <input matInput class="mt-20" formControlName="ISRawMaterialInspection" *ngIf="form.get('ISRawMaterialInspection').value form.get('IsOxidizable').value !== ''"/>
                        
    <input matInput class="mt-20" formControlName="ISRawMaterialRiskState" *ngIf="form.get('ISRawMaterialRiskState').value form.get('IsOxidizable').value !== ''"/>

但是考虑到 OP 已经接受了答案并可能解决了问题，这里有一个问题。

var a = new String('');

if (a) -> will evaluate to true

所以也许 OP 没有使用原始字符串，而是使用 String 对象。

如果 a 等于 undefined、null、""、0 或 false，则 typescript 中的 if(a) 条件仅适用于原始数据类型。

if (new Boolean(false)) -> evaluates to true
if (new String('')) -> evaluates to true
if (new Number(0)) -> evaluates to true

最后感谢 Eliseo 的澄清，帮助我变得更好。