Question

我有一个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}`);

}

谢谢！

Answer 1

请尝试以下方法-

请检查您的@Component装饰器是否设置了以下属性-changeDetection: ChangeDetectionStrategy.OnPush-如果已设置，请删除changeDetection属性及其值，然后尝试执行代码。
希望它能正常工作。如果它不起作用或@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>

Answer 2

我无法解释原因，但是经过数小时的尝试后，routerLink问题消失了，并且目前按预期运行。

我的工作设计保持不变，只是由于data是异步加载的，因此我正在用*ngIf预先检查加载。

data必须先填充，然后才能允许Angular尝试构造routerLink。

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

具有动态值的RouterLink问题（加载计时问题？）

2 个答案: