Как использовать переменную Observable в * ngFor

Question

Я использую rxjs в своем приложении на языке nativescript. В моем случае я реализую простую анимацию, установив вершину StackLayout с наблюдаемой переменной 'myTop$'. Следующие коды работают хорошо, и "StackLayout" движется, как и ожидалось:

<AbsoluteLayout width="100%" height="100">
  <StackLayout [top]="myTop$ | async" height="30" backgroundColor="#faebd7" width="100%" verticalAlignment="center">
    <Label [text]="'abc'"></Label>
    <StackLayout class="hr-light"></StackLayout>
  </StackLayout>
</AbsoluteLayout>

public myTop$:Observable<Number> = interval(1000).pipe(map((animationIndex)=>{
          return animationIndex%100; // top range 0->100
      }),share());

Однако, когда я помещаю эти коды в *ngFor для дополнительной анимации, кажется, что ничего не происходит. Например:

  <template *ngFor="let item of objList ; let i=index ">
    <StackLayout [top]="myTop$ | async" height="30" backgroundColor="#faebd7" width="100%" verticalAlignment="center">
      <Label [text]="item.label"></Label>
      <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
  </template>

Как я могу заставить его работать как положено?

Answer 1

Вам нужно использовать 'ng-template' вместо 'template'

<ng-template *ngFor="let item of objList ; let i=index ">
    <StackLayout [top]="myTop$ | async" height="30" backgroundColor="#faebd7" width="100%" verticalAlignment="center">
      <Label [text]="item.label"></Label>
      <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
  </ng-template>

Answer 2

Спасибо всем за помощь, чтобы исправить мою ошибку.

Тем не менее, он все еще не может работать, пока я не заменю 'ng-template' на 'ng-container'.

Чтобы исключить отвлечение нативного сценария ， Я также могу воспроизвести эту проблему в чистой среде angular6.

Мне известно о разнице между 'ng-template' и 'ng-container'. Любое объяснение?

Answer 3

Просто используйте ng-template вместо template, потому что в угловых 6 шаблон не существует.

пример:

<ng-template *ngFor="let item of objList ; let i=index ">
    <StackLayout [top]="myTop$ | async" height="30" backgroundColor="#faebd7" width="100%" verticalAlignment="center">
      <Label [text]="item.label"></Label>
      <StackLayout class="hr-light"></StackLayout>
    </StackLayout>
  </ng-template>