ゼロ要素を間違って返すアンギュラアニメーションクエリ

Question

私はAngularを使用してElectronアプリケーションで作業していますが、メインページはJSONファイルから非同期にロードされる項目のリストを表示することになっています。

アニメーションをうまく読み込んでアニメーションしますが、アニメーションをずらすために、角度アニメーションのクエリ機能を呼び出します。

残念なことに、このクエリは、正しいアニメーション（ちょうど互い違いにはならない）を使用してほぼ即時に正常に読み込まれたにもかかわらず、ゼロ要素を返します。

これは、データがロードされる前にクエリの実行と関係があると思われますが、解決するために何ができるかはわかりません。

関連コードは以下に含まれています。

HTML：

<div [@itemList]="itemService.items.length"> 
    <div class="item-card" *ngFor="let item of itemService.items | 
    async;"> 
    </div> 
</div> 

コンポーネント：

@Component({ 
    selector: 'app-notes-list', 
    templateUrl: './notes-list.component.html', 
    styleUrls: ['./notes-list.component.css'], 
    animations: [ 
     trigger('items', [ 
      transition(':enter', [ 
       style({ transform: 'scale(0.5)', opacity: 0 }), // initial 
       animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)', 
        style({ transform: 'scale(1)', opacity: 1 })) // final 
      ]), 
      transition(':leave', [ 
       style({ transform: 'scale(1)', opacity: 1, height: '*' }), 
       animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)', 
        style({ 
         transform: 'scale(0.5)', opacity: 0, 
         height: '0px', margin: '0px' 
        })) 
      ]) 
     ]), 
     trigger('itemList', [ 
      transition(':enter', [ 
       query('.item-card', stagger(3000, animateChild())) 
      ]), 
     ]) 
    ] 
}) 
export class NotesListComponent implements OnInit { 

    constructor(private itemService: ItemService) { } 

    ngOnInit() { 
     this.getItems(); 
    } 

    getItems(): void { 
     this.itemService.getItems(); 
    } 
} 

サービス：

@Injectable() 
export class ItemService { 

    items: Subject<Item[]>; 
    itemDataStore: Item[]; 

    constructor(private electronService: ElectronService, 
     private zone: NgZone) { 

     this.items = new Subject<Item[]>(); 

     this.electronService.ipcRenderer.on('sending-items', (event, args) => { 
      this.itemDataStore = args; 
      this.zone.run(() => { 
       console.log('Got data'); 
       this.items.next(this.itemDataStore); 
      }); 
     }); 
    }; 

    getItems(): Observable<Item[]> { 
     this.electronService.ipcRenderer.send('get-items'); 
     return this.items.asObservable(); 
    } 
} 

Answer 1

items: Subject<Item[]>;は、サービスを呼び出すコンポーネントでなければなりません。

次に、Observableを返すメソッドにサブスクライブして、コンポーネント内のアイテムを取得する必要があります。これは、この近くになります。

this.itemService.getItems().subscribe(data => { 
    this.items = data; 
}); 

次にcomponent.htmlに

<div [@itemList]="items.length"> 
    <div class="item-card" *ngFor="let item of items | 
    async;"> 
    </div> 
</div> 

問題（未定義の長さ）を解決するためには、にオプションのパラメータを設定するアップデートtrue、クエリ内：

trigger('itemList', [ 
     transition(':enter', [ 
     query('.item-card', [ 
      stagger(3000, [ 
      animateChild() 
      ]), 
     ], { optional: true }) 
     ]), 
    ]) 

とdivの中で：[@itemList]="items?.length"