RouterLink работает в браузере, но не на эмуляторе или устройстве

Question

На моей домашней странице есть ссылка на роутер на более подробную страницу фильма:

      <ion-col class="ion-text-left"  [routerLink]="['/item-details/', title.imdbid]" routerDirection="forward">
...
</ion-col>

и вот как идентификатор элемента читается в подробностях метода page.ts onNgInit:

        ngOnInit() {
    this.activeVariation = 'size';
    this.imdbId = this.route.snapshot.params.imdbId;
    console.log(this.imdbId);
    this.title = this.data.getDetailsByImdbId(this.imdbId).subscribe(
      (res) => this.title = res,
      (err) => console.log(err),
      () => console.error(this.title)
    );    
  }

и вот как это показано в page.html:

      <h1 class="item-name"> {{ title.Title }}</h1>

Когда я запускаю, в браузере все работает отлично:

      ionic serve

Но когда я запускаю приложение на устройстве или в эмуляторе, все элементы title.xxx на странице сведений остаются пустыми.

Когда я отлаживаю его, я могу заставить приложение правильно регистрировать заголовок "title.Title" с помощью метода ngOnInit в эмуляторе, но он все равно не будет отображаться на странице. Это почти похоже на завершение ngOnInit после загрузки страницы, но когда заголовок больше не является неопределенным, страница не обновляется.

Есть идеи?

Answer 1

---

Попробуйте использовать асинхронный канал

      <h1 class="item-name">  {{(title| async)?.Title}}</h1>

Это тоже должно помочь. Не используйте подписку повторно, в крайних случаях это может быть плохо. Обычно я предлагаю использовать ngOnDestroy и отпишусь.

Измените свой ts файл на этот

        ngOnInit() {
    this.activeVariation = 'size';
    this.imdbId = this.route.snapshot.params.imdbId;
    console.log(this.imdbId);
    this.title = this.data.getDetailsByImdbId(this.imdbId) //this returns an observable
      }
    
     ngOnDestroy() {
        this.title.unsubscribe();
      }

Возможно, также подумайте о том, чтобы не использовать снимок и вместо этого использовать канал

           this.title = this.route.paramMap.pipe(
switchMap((params) => {
      this.imdbId = params.get('imdbId');
      return this.data.getDetailsByImdbId(this.imdbId)
    }),
    catchError(err => {
      console.log(err);
    })
);

Но, возможно, я написал код неправильно, поэтому и редактирую его, если кто-то уверен, меня могут поправить.

Answer 2

РЕШЕНО!

Фактическая проблема заключалась не в том, что routerLink не работал, а в том, что данные не были получены службой данных (плохая обработка ошибок:/). Я не подозревал, что это могло быть так, потому что мои вызовы API нормально работали в Postman.

Тем не менее, мне пришлось разрешить приложению использовать чистый текстовый трафик, добавив приведенный ниже код в файл AndroidManifest.xml, и теперь все в порядке.

      <application
        ...
        android:usesCleartextTraffic="true">