javascript - 我可以使用异步管道将变量放入 ngFor 中吗？

Question

这是我的(标准化)状态:

export class State {
    chatIDs: string[];
    chats: { [chatID:string]: Chat };
}

尝试在某些组件模板中循环聊天(状态为 Observable):

<div *ngFor="let chatID of (state$ | async).chatIDs; 
             let currentChat = (state$ | async).chats[chatID]">
   <!---->
</div>

字符串 let currentChat = (state$ | async).chats[chatID] 抛出错误:

unexpected token (, expected identifier, keyword, or string

如何将当前聊天的引用放入循环中？例如，可以作为具有输入 (state$ | async).chats[chatID] 的子组件。但是有没有更优雅的方法(无需创建任何新组件)？

Angular v2.4

Answer 1

您可以使用 *ngIf 指令首先检查，然后使用 *ngFor 迭代聊天。

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { Subscriber } from "rxjs/Subscriber";

export class Chat {
  message: string
  constructor(message: string) {
    this.message = message;
  }
}



export class State {
  chatIDs: string[];
  chats: {
    [chatID: string]: Chat
  };
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  state: any;

  ngOnInit(): void {
    this.state = new Observable<State>((observer: Subscriber<State>) => {
      setInterval(() => {
        let state = new State();
        state.chatIDs = ['1', '2', '3'];
        state.chats = {
          '1': new Chat('Chat 1'),
          '2': new Chat('Chat 2'),
          '3': new Chat('Chate 3')
        }
        observer.next(state)
      }, 1000);
    });
  }
}

使用 *ngIf 将变量放入范围内:

<div *ngIf="state | async; let s">
  <div *ngFor="let id of s?.chatIDs">
    {{ s?.chats[id] | json }}
  </div>
</div>