未定义标识符“名称”。 “对象”不包含这样的成员

Question

我正在使用 angular + ionic 创建一个应用程序。 在应用程序中，用户可以设置帐户和其他人的帐户。 我在一个页面上显示其他用户帐户，但是当我尝试在他们自己的页面上显示当前用户帐户时，我收到此错误：

有人可以帮我解决这个错误吗？ 问题是当我尝试在 tab4 页面上调用相关艺术家名称时

tabs.page.ts：

export class Tab4Page implements OnInit, OnDestroy {
  loadedArtist: Artist[];
  relevantArtist: Artist[];
  isLoading = false;

  private artistSub: Subscription;

  constructor(
    private artistService: ArtistService,
    private authService: AuthService
  ) { }

  ngOnInit() {
    this.artistSub = this.artistService.artist.subscribe(artist => {
      this.loadedArtist = artist;
      this.relevantArtist = this.loadedArtist;
      this.loadedArtist = this.relevantArtist.slice(1);
      this.authService.userId.pipe(take(1)).subscribe(userId => {
        this.relevantArtist = this.loadedArtist.filter(
          artist => artist.userId === userId
        );
      });
    });
  }

  ionViewWillEnter() {
    this.isLoading = true;
    this.artistService.fetchArtist().subscribe(() => {
      this.isLoading = false;
    });
  }

  ngOnDestroy() {
    if (this.artistSub) {
      this.artistSub.unsubscribe();
    }
  }

}

tag4.page.html：

<ion-header>
  <ion-toolbar>
    <!-- add menuId to have different menus -->
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      <ion-title>{{ isLoading ? 'Loading...' : relevantArtist.name }}</ion-title>
    </ion-title>
  </ion-toolbar>

<ion-content>


</ion-content>

它调用的信息位于使用 firebase 的服务中。 其他页面根本没有问题，我很困惑为什么这个页面有问题。

任何帮助表示赞赏！

Answer 1

似乎问题在于relevantArtist Artist是Artist的数组而不是对象Artist 。 Filter函数创建一个传递条件集的新数组。

查看您的实现，似乎relevantArtist将始终是Artist的单个实例。 如果是这种情况，并且每个艺术家的变量userId都是唯一的，您可以使用函数find而不是过滤器，这样您将获得一个Artist 。

您需要对代码进行以下更改：

...
// Artist[] => Artist
currentArtist: Artist;
...
// filter => find
this.currentArtist = this.loadedArtist.find(artist => artist.userId === userId);

Answer 2

在将加载设置为 false 之前，我会重写代码以等待所有订阅完成。

ngOnInit() {
}

ionViewWillEnter() {
  this.isLoading = true;
  
  this.artistSub = this.artistService.artist.subscribe(artist => {
    this.loadedArtist = artist;
    this.relevantArtist = this.loadedArtist;
    this.loadedArtist = this.relevantArtist.slice(1);
    this.authService.userId.pipe(take(1)).subscribe(userId => {
      this.relevantArtist = this.loadedArtist.find(
        artist => artist.userId === userId
      );

      this.isLoading = false;
    });
  });
}

ngOnDestroy() {
  if (this.artistSub) {
    this.artistSub.unsubscribe();
  }
}

此外，我会考虑重构您的订阅代码，因为将不同类型分配到同一个变量中有点令人困惑