Question

我一直试图让观察者现在有点工作，但我一直都在失败。

此时，我的代码开始看起来更像是战场，而不是通常的命令。

我一直收到“ERROR TypeError：无法读取未定义的属性'map'。”

我正在尝试导入json数据（有效），然后过滤掉“Active”（有效）的成员，按字母顺序对它们进行排序（这不起作用），并获取所有内容的唯一列表团队“专栏（不起作用）。

该服务如下：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
//import 'rxjs/add/operator/catch';
//import 'rxjs/add/operator/map';
import { catchError, map, tap } from 'rxjs/operators';

import { Member } from '../class/member';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class UserinfoService
{

    //constructor
    constructor(private http: HttpClient)
    {

    }

    //methods or services

    getMembers(): Observable<Member[]>
    {
    return this.http.get<Member[]>('http://datalocation.com/JsonData/api/teammembers');
    }
}

组件：

import { Component, OnInit, Injectable } from '@angular/core';
import { UserinfoService } from '../services/userinfo.service';
import { Member } from '../class/member';
import { MatDialog } from '@angular/material';
import { MemberdialogComponent } from '../memberdialog/memberdialog.component';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable


// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';



@Component({
  selector: 'app-teammembers',
  templateUrl: './teammembers.component.html',
  styleUrls: ['./teammembers.component.css']
})
export class TeammembersComponent implements OnInit
{

  //props
  teamMembers: any[];
  searchQuery: any = "";
  searchResults: any[] = this.teamMembers;
  teams: any[];
  selectedTeam: any;

  //constructor
  constructor(private userinfoService: UserinfoService, public dialog: MatDialog)
  {
    //getData
    userinfoService.getMembers().subscribe(teamMembers => this.teamMembers = teamMembers
.filter(member => member.isActive)
.sort((a, b) => a.lastName.localeCompare(b.lastName)));


    //put all information in results
    this.searchResults = this.teamMembers;

    //getTeams
    this.teams = this.teamMembers
    .map(item => item.team)
    .filter((value, index, self) => self.indexOf(value) === index)
  }

非常感谢任何帮助。当它只是一项服务时，我得到了一切工作，但是当我开始观察时，它就搞砸了。

Answer 1

订阅内的代码是异步运行的。

您尝试在此之前执行this.teamsMembers.map。订阅设置了.teamsMembers。

您应该将this.teams = this.teamsMembers.map...代码放在subscribe lambda函数中。

Answer 2

userinfoService.getMembers（）。subscribe（teamMembers =＆gt; this.teamMembers = teamMembers .filter（member =＆gt; member.isActive） .sort（（a，b）=＆gt; a.lastName.localeCompare（b.lastName）））;

听说你已经在组件变量中得到了teamMembers数组。所以不需要在后面的部分中要求地图。你可以直接在teamMembers数组上使用过滤器。

//getTeams
this.teams = this.teamMembers.filter((value, index, self) => self.indexOf(value) === index)

Answer 3

您只需要移动订阅中的所有内容。

也不是100％在构造函数中执行所有操作，我通常在我的ngOnInit中执行此类操作，但现在既不在这里也不在那里。

你可以做的另一件事是： teamMembers: any[] = new Array(); 这实际上会正确初始化您的数组，以便它不是未定义的。

角度可观察到的问题

3 个答案: