ng-template не срабатывает, когда данные становятся пустыми

Я использую список ul, который отображает данные из массива, массив изначально пуст, для которого я использовал другой шаблон "пустой" шаблон, вот код:

<ul class="list-group" *ngIf="data else empty">
  <li *ngFor="let num of data">
    <span>{{num}}</span>
  </li>
</ul>

<button class="btn btn-sm btn-primary" (click)="fillData()">Fill</button>
<button class="btn btn-sm btn-primary" (click)="clearData()">clear</button>

<ng-template #empty>
  <span>.... list empty....</span>
</ng-template>

Теперь скрипт для приведенного выше кода выглядит следующим образом

export class QlistComponent implements OnInit {

  data: any[];

  fillData() {
    this.data = [1, 2, 3];
  }

  clearData() {
    this.data = [];
  }

}

Проблема: по какой-то странной причине шаблон #empty срабатывает только один раз в начале, когда данные пусты, но после заполнения данных fillData() и затем снова очищается clearData() #пустой шаблон не сработает


angular ng-template angular5
person HVenom    schedule 20.03.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В выражении *ngIf проверьте data.length не данные:

<ul class="list-group" *ngIf="data.length else empty">
      <li *ngFor="let num of data">
        <span>{{num}}</span>
      </li>
    </ul>

В вашем случае *ngIf проверяет, существуют массивы или нет. Когда вы очистили данные, ссылки остались на месте ПРИМЕР КОДА

person Yerkon    schedule 20.03.2018

arrow_upward
1
arrow_downward

Привет. Попробуйте приведенный ниже код:

в .html файле

<ul class="list-group" *ngIf="data.length>0 else empty">
  <li *ngFor="let num of data">
    <span>{{num}}</span>
  </li>
</ul>

<button class="btn btn-sm btn-primary" (click)="fillData()">Fill</button>
<button class="btn btn-sm btn-primary" (click)="clearData()">clear</button>

<ng-template #empty>
  <span>.... list empty....</span>
</ng-template>

.ts-файл

data: any[]=[];

  fillData() {
    this.data = [1, 2, 3];
  }

  clearData() {
    this.data = [];
  }
person Anup pandey    schedule 20.03.2018