从异步列表更新 UI html答案

【问题标题】：Update UI html from async list从异步列表更新 UI html
【发布时间】：2018-06-13 15:09:29
【问题描述】：

我试图了解我所做的。我有一个异步项目列表（每次不同的数字）。我正在尝试使用*ngFor 将它们中的每一个设置为不同的div

details.html

<div class="container row">
    <div id="letter">
        <div id="lines_container">
            <div *ngFor='let sentence of sentences' id="line_{{i}}" class="new-line glow">
                {{sentence.name}}
            </div>
        </div>
    </div>
</div>

DetailsComponent.ts

@Component({
    selector: 'app-details',
    templateUrl: 'details.html',
    styleUrls: ['details.scss']
})
export class DetailsComponent implements OnInit {
  sentences: string[];

  constructor(private data: DetailsService, private ravenDataService: RavenDataService) { }

  ngOnInit(): void {
    this.data.sentences.subscribe(sentences => {
      console.log(sentences);
      this.sentences = sentences;
    });
  }
}

几秒钟后，我可以看到打印了我的句子的日志，但它没有更新我的 HTML 页面。我也尝试使用异步管道但没有成功

<div *ngFor='let sentence of sentences | async' id="line_{{i}}" class="new-line glow">

【问题讨论】：

标签： angular asynchronous eventemitter

【解决方案1】：

我认为这只是一个错字，请尝试使用异步管道并且不要使用订阅。

@Component({
    selector: 'app-details',
    templateUrl: 'details.html',
    styleUrls: ['details.scss']
})
export class DetailsComponent implements OnInit {
  sentences$;

  constructor(private data: DetailsService, private ravenDataService: RavenDataService) { }

  ngOnInit(): void {
    this.sentences$ = this.data.sentences
  }
}

和

<div *ngFor='let sentence of sentences$ | async' id="line_{{i}}" class="new-line glow">

始终在流的末尾加上 $ 符号，这是一种常见的约定

【讨论】：