bugfix> angular > 投稿

私は rxjs を使用しています私のnativescript-angularアプリで。 私の場合、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>

期待どおりに動作させるにはどうすればよいですか?

回答 3 件
  • ng-template を使用するだけ   template の代わりに  Angle 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>
    
    

  • 「テンプレート」の代わりに「ng-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>
    
    

  • 私の間違いを修正するためにあなたの助けをありがとう。

    ただし、「ng-template」を「ng-container」に置き換えるまでは動作しません。

    nativescriptの注意散漫を排除するために、純粋なangular6環境でこの問題を再現することもできます。

    「ng-template」と「ng-container」の違いを感じています。説明はありますか?

あなたの答え