Обнаружение изменений не стреляет Angular 9 - PullRequest
Новая
       60

Обнаружение изменений не стреляет Angular 9

1 голос
/ 28 апреля 2020

Я только что обновил свое приложение до angular 9 

Angular CLI: 9.1.3
Node: 10.16.0
OS: win32 x64

Angular: 9.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Ivy Workspace: <error>

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.3
typescript                        3.7.3
webpack                           4.42.0

, теперь в основном мое приложение работало нормально до обновления, а теперь после обновления обычная стратегия обнаружения изменений, похоже, не срабатывает.

Например, у меня есть такой компонент:

component.ts 

// ...

@Component({
    selector: 'app-library',
    templateUrl: './library.component.html',
    styleUrls: ['./library.component.scss'],
})

// ...


constructor(
  private bookService: BookService
) {}

books: Book[];

ngOnInit() {
  this.getBooks();
}

getBooks() {
  this.bookService.getBooks().subscribe(result => {
    this.books = result;
  })
}

component. html

<ul>
   <li *ngFor="let book of books">{{book.title}}</li>
</ul>

теперь, когда я console.log результат из getBooks, я вижу, что возвращается 100 книг, но это не обновляет вид, экран остается пустым ..

Теперь я знаю Я могу сделать это 

constructor(
   private _cdr: ChangeDetectorRef
) {}

// ...

getBooks() {
  // ...
  this._cdr.detectChanges();
}

, но это кажется неэффективным, и теперь мне придется go пройти через все мое приложение и поместить его в любое место, где обновляется значение ...

Я могу не найти никаких ссылок в Интернете о различиях в обнаружении изменений между 8 -> 9 ... кто-нибудь знает, что здесь происходит ??

РЕДАКТИРОВАТЬ

Просто чтобы уточнить вызов this._cdr.detectChanges() устраняет проблему и обновления DOM

РЕДАКТИРОВАТЬ 2

Это только се Это будет проблемой при начальной загрузке страницы, после этого, если вы измените состояние, страница обновится .. странно

1 Ответ

0 голосов
/ 29 апреля 2020

если у объекта книги есть поле идентификатора, вы можете переопределить обнаружение изменений с помощью функции trackBy 

// ts
trackBy: (book) => book.id

// html
<ul>
   <li *ngFor="let book of books; trackBy: trackById">{{book.title}}</li>
</ul>
...