Мне удалось воспроизвести это отставание в IE.
Я реорганизовал ваш код, чтобы сделать его работоспособным. Если вы имеете дело с большим набором данных и отображением больших списков, кроме trackBy, вам также следует рассмотреть возможность использования ChangeDetectionStrategy.OnPush в качестве changeDetectionStrategy.
Вот как выглядит ваш переработанный код:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-comments',
templateUrl: './comments.component.html',
styleUrls: ['./comments.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CommentsComponent {
comments$: Observable<Array<any>> = this.http.get(`https://jsonplaceholder.typicode.com/comments`);
constructor(private readonly http: HttpClient) { }
trackyFn(item) {
return item.id;
}
}
Шаблон:
<h1>Comments</h1>
<div class="row">
<div class="col-md-12" style="height: 250px; overflow:scroll">
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let comment of comments$ | async; trackBy:trackyFn;">
<td>{{comment.id}}</td>
<td>{{comment.name}}</td>
<td>{{comment.email}}</td>
<td>{{comment.Body}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Точно так же вы можете выполнить рефакторинг PostsComponent.
И ваш AppComponent:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
name = 'Angular';
registerForm: FormGroup;
constructor(private readonly formBuilder: FormBuilder) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
termsAgreed: [false],
gender: ['male'],
std: [10]
});
}
}
Изменения, которые я сделал:
- Использовал
changeDetection: ChangeDetectionStrategy.OnPush, во всех компонентах. - Главный фактор повышения производительности, поскольку Angular выполняет меньше циклов CD.
- Используется
async в шаблонах вместо ручного subscribe ing и unsubscribe ing из Observable и Subscription соответственно. - Просто чтобы сделать код чище.
Чтобы увидеть, как улучшается производительность, если вы пользователь Windows, нажмите и удерживайте любую клавишу на клавиатуре, пока вы находитесь в поле Текстовая форма, и посмотрите, плавно ли отображается ввод.
Вот Рабочий образец StackBlitz для вашей ссылки.