时间戳

首页 > 解决方案 > 未定义标识符“名称”。'object' 不包含这样的成员

angular - 未定义标识符“名称”。'object' 不包含这样的成员

问题描述

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

有人可以帮我解决这个错误吗？问题是当我尝试在 tab4 页面上调用relatedArtist.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>

选项卡路由.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 的服务中。其他页面根本没有问题，我很困惑为什么这个页面会这样。

任何帮助表示赞赏！

标签： angularionic-framework

解决方案

似乎问题在于不是 objectrelevantArtist的数组。Filter函数创建一个传递条件集的新数组。ArtistArtist

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

始终假设 userId 是唯一的一种解决方案是简单地获取该数组的元素 0。

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

另一个更优雅的解决方案，总是假设userId每个艺术家都是独一无二的，是使用函数find而不是 filter，这样你会得到一个Artist.

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

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

也可以创建一个管道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>

推荐阅读