Javascript 我可以将一个变量输入到NGO中以使用异步管道吗？

这是我的（标准化）状态：

尝试在某些组件模板中循环聊天（状态为可观察）：

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

字符串

let currentChat=（state$| async）。chats[chatID]

抛出错误：

意外的标记（、预期的标识符、关键字或字符串）

如何在循环中获取当前聊天的引用？例如，作为子组件输入

（state$| async）.chats[chatID]

，这是可能的。但是有没有更优雅的方式（不创建任何新组件）

---

Angular v2.4

您可以使用

*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);
    });
  }
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/Subscriber”导入{Subscriber}；
导出类聊天{
消息：string
构造函数（消息：string）{
this.message=消息；
}
}
出口类国家{
chatIDs:string[]；
聊天：{
[聊天ID:string]：聊天
};
}
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
国家：任何；
ngOnInit（）：void{
this.state=新的可观察对象（（观察者：订户）=>{
设置间隔（（）=>{
让状态=新状态（）；
state.chatIDs=['1'，'2'，'3']；
state.chats={
“1”：新建聊天室（“聊天室1”），
“2”：新建聊天室（“聊天室2”），
“3”：新建聊天室（“聊天室3”）
}
观察员：下一个（国家）
}, 1000);
});
}
}

使用*ngIf将变量s放入范围：

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

{{s？.chats[id]| json}

您可以使用

*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);
    });
  }
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/Subscriber”导入{Subscriber}；
导出类聊天{
消息：string
构造函数（消息：string）{
this.message=消息；
}
}
出口类国家{
chatIDs:string[]；
聊天：{
[聊天ID:string]：聊天
};
}
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
国家：任何；
ngOnInit（）：void{
this.state=新的可观察对象（（观察者：订户）=>{
设置间隔（（）=>{
让状态=新状态（）；
state.chatIDs=['1'，'2'，'3']；
state.chats={
“1”：新建聊天室（“聊天室1”），
“2”：新建聊天室（“聊天室2”），
“3”：新建聊天室（“聊天室3”）
}
观察员：下一个（国家）
}, 1000);
});
}
}

使用*ngIf将变量s放入范围：

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

{{s？.chats[id]| json}