标识符 'name' 未定义。 'object'不包含这样的成员

Question

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

有人可以帮我解决这个错误吗？问题是当我尝试在 tab4 页面

上调用 relevantArtist.name

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>

制表符-routing.module.ts:

  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'discover/:artistId',
        loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
      },
      {
        path: 'discover-venue/:venueId',
        loadChildren: () => import('../tab1/discover/venue-details/venue-details.module').then(m => m.VenueDetailsPageModule)
      }
    ]
  },

      {
        path: 'tab4',
        children: [
          {
            path: ':artistId',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: 'edit/:artistId',
        loadChildren: () => import('../tab4/edit-page/edit-page-routing.module').then(m => m.EditPagePageRoutingModule)
      }
    ]
  },

它调用的信息位于使用 firebase 的服务中。其他页面完全没有问题，我很困惑为什么这一页会出现问题。

感谢任何帮助！

Answer 1

看来问题是 relevantArtist 是 Artist 的数组而不是对象 Artist。 Filter 函数创建一个新数组，该数组通过条件集。

查看您的实现，“当前用户”似乎始终是 Artist.

的单个实例

一个解决方案，总是假设 userId 是唯一的，就是简单地获取该数组的元素 0。

<ion-title>{{ isLoading ? 'Loading...' : relevantArtist[0].name }}</ion-title>

另一个更优雅的解决方案，总是假设 userId 对于每个艺术家都是唯一的，是使用函数 find 而不是过滤器，这样你将得到一个 Artist .

您需要对代码进行以下更改以添加新变量来存储当前用户信息：

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

也可以创建一个管道来直接在模板上使用 find。

find.pipe.ts

import {
    Injector,
    Pipe,
    PipeTransform
} from '@angular/core';
@Pipe({
  name: 'find'
})
export class FindPipe implements PipeTransform {

    public constructor(private readonly injector: Injector) {
    }

    transform(value: Array<any>, callback: any): any {
        return value.find(callback);
    }
}

在你的.ts中，添加过滤函数

findCurrentUser(artist: Artist): boolean {
  return artist.userId === userId;
}

在你的tab4.page.html

<ion-title>
  {{ isLoading ? 'Loading...' : relevantArtist.name | find: findCurrentUser}}
</ion-title>

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();
  }
}

Also I would consider refactoring your subscription code because it's kinda confusing assigning different types into the same variable

标识符 'name' 未定义。 'object'不包含这样的成员

Identifier 'name' is not defined. 'object' does not contain such a member

ionic-framework

angular