* ngЕсли не открывается шаблон - PullRequest
Новая
       4

* ngЕсли не открывается шаблон

0 голосов
/ 24 января 2020

У меня есть файл. 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;
    }
}

Заранее благодарим за ваши ответы.

Ответы [ 3 ]

2 голосов
/ 24 января 2020

Как объяснено в документации Angular , ngTemplate не может быть отображено само по себе; это должно быть отображено структурной директивой. Используя в своей разметке *ngIf сокращенный синтаксис , вы получите эквивалентную разметку: 

<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>

Внешний ngTemplate части ngIf соответствующим образом контролируется директива ngIf, но к внутренней ngTemplate не применена структурная директива. В результате он никогда не отображается.

Одним из возможных решений является использование явной записи ngIf, как это предлагается в ответе SoCo . Другое решение - применить директиву *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>

Вы можете поэкспериментировать со следующими примерами стекаблица: первый аналогичен вашему текущему коду, а второй применяет директиву *ngIf к HTML элемент вместо ngTemplate.

С учетом всего сказанного, вашему примеру кода на самом деле не нужна структурная директива ngIf, поскольку эти две части отличаются только свойством disabled. Вы можете просто связать это свойство: 

<option value="{{i.OBJECTID}}" [disabled]="!isTrue">{{i.OBJECTID}}</option>
2 голосов
/ 24 января 2020

Я думаю, проблема в том, что вы проверяете 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>
0 голосов
/ 24 января 2020

Попробуйте изменить <ng-template> *ngIf синтаксис с 

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

на 

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

Здесь - это небольшая демонстрация, демонстрирующая, как это работает.

Подробнее о директиве *ngIf вы можете прочитать здесь

...