我正在努力理解我的所作所为。我有一个异步的项目列表(每次都有不同的数字)。我试图使用div
将它们中的每一个设置为不同的*ngFor
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">
我认为这只是一个错字,请尝试使用异步管道,不要使用订阅。
@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">
始终用$符号标记你的溪流,这是一个常见的惯例