Angular 如何等到长文本完全显示？

Question

我的问题是我想显示一个文本，如果它很短就没有问题，但是当文本太长时它会跳一些句子。所以我需要添加一个等待时间，直到它被正确打印出来，但我不知道如何，因为我是 Angular 和 TypeScript 的新手。我读过 setTimeout 但不知道如何将它实现到我需要它的部分。 <p>{{longText}}</p>

如果可以的话尽量解释一下。

Answer 1

你可以这样做。

以下演示呈现 5000 行数据；

Live demo - load table

以下演示呈现 >5 MB 的数据。

Live demo - load string data

ts

  isLoading = false;
  data;

  constructor(private http: HttpClient) {}

  loadData() {
    this.isLoading = true;
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe(
      (res) => { this.data = res; },
      (err) => {},
      () => { this.isLoading = false; }
    )
  }

html

<p *ngIf="isLoading">Loading..</p>

<table style="width:100%" *ngIf="data && !isLoading">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr *ngFor="let val of data">
    <td>{{val.id}}</td>
    <td>{{val.title}}</td>
    <td>{{val.url}}</td>
  </tr>
</table>

Answer 2

根据异步调用行为，首先解析数据，然后仅更新视图。当然，你的模板应该正确绑定*ngIf条件。

我更新了@hbamithkumara 分享的代码。

我觉得加载程序是用于用户反馈目的的一个很好的插件，但您在这里想要了解的基本内容是加载 {{longText}}（long text/data）。

模板

<td>{{val?.id}}</td>
<td>{{val?.title}}</td>
<td>{{val?.url}}</td>

TS

export class AppComponent  {
  name = 'Angular';;
  data;
  loading = true;

  constructor(private http: HttpClient) {
    this.loadData();
  }

  loadData() {
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe( res => {
      this.loading = false;
      this.data = res;
    })
  }

}

演示（预览）：https://sof-q-59029627.stackblitz.io/
DEMO（编辑）：https://stackblitz.com/edit/sof-q-59029627

Angular 如何等到长文本完全显示？

Angular how to wait until a long text is fully displayed?

wait

typescript

angular