*ngIf 不会打开模板

Question

我有一个 .html 文件来显示一些值。我在我的标签中添加了带有“*ngIf”的条件，以查找以 "Rechercher ..." 结尾的值。也许我找不到如何让它工作。我尝试了几种方法，现在我只有一个值为 true 的布尔值来确定我是否可以在我的模板之间切换，但他仍然不会打开其中一个。

原始（工作）

<datalist id="{{row.LISTID}}">
    <option value="{{value}}">{{value}}</option>
    <option *ngFor="let i of tableEquipmentDataTmp[row.LISTID]" value="{{i.OBJECTID}}"> {{i.OBJECTID}}
    </option>
</datalist>

更改（无效）

<datalist id="{{row.LISTID}}">
    <option value="{{value}}">{{value}}</option>
    <div *ngFor="let i of tableObjectDataTmp[row.LISTID]">
        <ng-template *ngIf="isTrue else disabled_lock">
            <option value="{{i.OBJECTID}}">{{i.OBJECTID}}</option>
        </ng-template>
        <ng-template #disabled_lock>
            <option value="{{i.OBJECTID}}" disabled>{{i.OBJECTID}}</option>
        </ng-template>
    </div>
</datalist>

ts（编辑）

export class HeaderComponent implements OnInit {
    isTrue = true;
    ngOnInit() {
        this.isTrue = true;
    }
}

提前感谢您的回复。

Answer 1

我认为问题在于您正在检查 isTrue，而不是 i.isTrue。

<datalist id="{{row.LISTID}}">
    <option value="{{value}}">{{value}}</option>
    <div *ngFor="let i of tableObjectDataTmp[row.LISTID]">
        <ng-template *ngIf="i.isTrue else disabled_lock">
            <option value="{{i.OBJECTID}}">{{i.OBJECTID}}</option>
        </ng-template>
        <ng-template #disabled_lock>
            <option value="{{i.OBJECTID}}" disabled>{{i.OBJECTID}}</option>
        </ng-template>
    </div>
</datalist>

Answer 2

尝试更改 <ng-template> *ngIf 语法

<ng-template *ngIf="isTrue else disabled_lock">

到

<ng-template [ngIf]="isTrue" [ngIfElse]="disabled_lock">

Here 是一个演示其工作原理的小演示。

您可以阅读有关 *ngIf 指令的更多信息 here

Answer 3

正如在标记中的 Angular documentation, an ngTemplate cannot be displayed by itself; it must be displayed by a structural directive. By using the *ngIf shorthand syntax 中所解释的，您最终得到了这个等效标记：

<ng-template [ngIf]="isTrue" [ngIfElse]="disabled_lock">
  <ng-template>
    <option value="{{i.OBJECTID}}">{{i.OBJECTID}}</option>
  </ng-template>
</ng-template>
<ng-template #disabled_lock>
  <option value="{{i.OBJECTID}}" disabled>{{i.OBJECTID}}</option>
</ng-template>

ngIf 部分的外部 ngTemplate 由 ngIf 指令适当控制，但内部 ngTemplate 没有应用结构指令。因此，它永远不会显示。

一种可能的解决方案是使用显式 ngIf 表示法，如中所建议的那样。另一种解决方案是将 *ngIf 指令应用于 option 元素：

<option *ngIf="isTrue else disabled_lock" value="{{i.OBJECTID}}">{{i.OBJECTID}}</option>
<ng-template #disabled_lock>
  <option value="{{i.OBJECTID}}" disabled>{{i.OBJECTID}}</option>
</ng-template>

如果第一个 ngTemplate 包含多个元素，您可以将其替换为 ng‑container:

<ng-container *ngIf="isTrue else disabled_lock">
  <option value="value1">Caption 1</option>
  <option value="value2">Caption 2</option>
</ng-container>
<ng-template #disabled_lock>
  <option value="value3" disabled>Caption 3</option>
</ng-template>

您可以尝试以下 stackblitz 示例：the first one is similar to your current code while the second one 将 *ngIf 指令应用于 HTML 元素而不是 ngTemplate。

综上所述，您的代码示例实际上并不需要 ngIf 结构指令，因为这两部分仅 disabled 属性不同。你可以绑定属性:

<option value="{{i.OBJECTID}}" [disabled]="!isTrue">{{i.OBJECTID}}</option>

*ngIf 不会打开模板

*ngIf won't open a template

angular-ng-if

angular