Проблема RouterLink с динамическими значениями (проблема с загрузкой?) - PullRequest
Новая
       29

Проблема RouterLink с динамическими значениями (проблема с загрузкой?)

0 голосов
/ 17 июня 2019

У меня есть проект IONIC-4 / Angular 7 со следующим routerLink; 

<p>{{ data?.name }}</p>
<ion-button [routerLink]="['/', 'tabs', 'projects', data?.name]">Configure Project</ion-button>

На текущей странице первый {{ data?.name }} выглядит нормально, однако в routerLink оноценивается как undefined.

Я подозреваю, что это проблема с синхронизацией загрузки, то есть при первом проходе рендеринга шаблона данные еще не загружены, поэтому они undefined, а на втором проходе все хорошо,Однако routerLink не берет обновленные данные.

Должен ли быть лучший подход к загрузке?Данные поступают из REST API, как показано ниже:

в page.ts ; 

data: any;

ngOnInit() {

    this.projectService.getProject(this.id)
      .subscribe((res) => {
        this.data = res; 
      });

}

Базовый projectService использует API; 

getProject(id: string): Observable<any> { 

  return this.http
    .get(`${this.endpointUrl}/${id}`);

}

Спасибо!

Ответы [ 2 ]

2 голосов
/ 17 июня 2019

Можете ли вы попробовать следующее -

  1. Пожалуйста, проверьте, имеет ли ваш @Component декоратор следующий набор свойств - changeDetection: ChangeDetectionStrategy.OnPush - Если он установлен, удалите свойство changeDetection и его значение и попробуйте свой код.

  2. Надеюсь, это сработает. Если это не работает или @Component не имеет установленного свойства changeDetection, обновите ваш код следующим образом:

    data$: Observable<any>; ngOnInit() { this.data$ = this.projectService.getProject(this.id); }

Обновите свой шаблон так - 

<ng-container *ngIf="data$ | async as data">
    <ion-button [routerLink]="['/', 'tabs', 'projects', data.name]">Configure Project</ion-button>
 </ng-container>
0 голосов
/ 17 июня 2019

Я не могу объяснить, почему, но после нескольких часов попыток использовать разные подходы к этому, проблема routerLink ушла, и в настоящее время она работает, как и ожидалось.

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

data должен быть заполнен, прежде чем я позволю Angular попытаться построить routerLink. 

<ion-button *ngIf="data" [routerLink]="['/', 'tabs', 'projects', 'edit', data?._id]">Configure Project</ion-button>
...