从异步列表更新UI html

时间:2018-01-03 22:10:58

标签: angular asynchronous eventemitter

我正在努力了解自己的所作所为。 我有一个异步的项目列表(每次都有不同的数字)。我正在尝试使用div

将每个*ngFor设置为不同的<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>

details.html

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

DetailsComponent.ts

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

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

 <i class="fa fa-info-circle" id="disclaimerTooltip" tabindex="0" aria-describedby="myfield_description"></i> 

<span class="test myfield_description" role="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 </span>

1 个答案:

答案 0 :(得分: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">

总是在最后用$ sign标记你的溪流,这是一个常见的约定