具有动态值的RouterLink问题(负载定时问题？)

Question

我有一个离子-4/角7项目，与以下routerLink；

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

在运行的页面中，第一个{{ data?.name }}看起来很好，但是在它的计算结果为undefined的routerLink中。

我怀疑这是一个加载时间问题，即在第一次模板呈现时，数据还没有加载，所以是undefined，而在第二次传递时，一切都是好的。然而，routerLink没有收集更新的数据。

一定有更好的方法来对付负载吗？数据来自REST，如下所示-

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

你能试试以下几种-

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>

Answer 2

我无法解释为什么，但是在尝试了几个小时的不同方法之后，routerLink问题就消失了，而且它目前正在按预期工作。

我的工作设计保持不变，只是由于data是异步加载的，所以我要使用*ngIf预检查负载。

在允许data尝试构造routerLink之前，必须先填充routerLink。

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