Angular 角度http客户端错误

这是我的应用程序的一个组件，它工作正常，但在

this.stylestdetails=data中出错这行。有人能提出解决办法吗

import { Component, OnInit } from '@angular/core';
    import {ActivatedRoute} from '@angular/router';
    import {HttpClient} from '@angular/common/http';

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

      stylistDetails: Stylist[] = [];
      need;
      type;
      showMessage;
      preferred_locations = [];

      countResults;

      // onNotifyClicked(message:string): void{
      //   this.showMessage = message;
      // }

      onClickLocFiltered(): void{
        this.http.get('/api/stylist/getStylist/loc').subscribe(
          data => {
            this.stylistDetails = data;
            this.countResults = this.stylistDetails.length;
          }
        );
      }

      constructor(private  route: ActivatedRoute, private http: HttpClient) {

        this.http.get<Stylist>('/api/stylist/getStylistName').subscribe(
          data => {
            this.stylistDetails = data;
            // console.log(this.stylistName);
            // console.log(this.stylistName.length);
            this.countResults = this.stylistDetails.length;
          }
        );


      }

      ngOnInit() {
        this.route
          .queryParams
          .subscribe(params => {
            // Defaults to 0 if no query param provided.
            this.need = params['need'] || 0;
            this.type = params['type'] || 0;
          });
      }
    }

    interface Stylist {
      name: string;
      address: string;
      cost: number;
      skills: string[];
    }

将subscribe方法从构造函数更改为：

this.http.get<any>('/api/stylist/getStylistName').subscribe(
  data => {
    this.stylistDetails = data;
    // console.log(this.stylistName);
    // console.log(this.stylistName.length);
    this.countResults = this.stylistDetails.length;
  }
);

this.http.get（'/api/stylist/getStylistName'）。订阅(
数据=>{
this.stylestdetails=数据；
//console.log（this.stylestname）；
//log（this.stylestname.length）；
this.countResults=this.style.details.length；
}
);
您的舒尔Styleist详细信息和数据是否具有相同的类型？是的，两者都具有您需要匹配的相同类型，在将数据分配给Styleist[]时，您使用的是
Styleist
。第二个问题是，您没有说明您希望得到哪种类型的响应，当Angular返回一个对象时，您正在尝试将其分配给
Stylest[]
。告诉Angular您需要的数据类型为
Styleist[]
：
this.http.get（'/api/styleist/getStyleist/loc'）
this.http.get<any>('/api/stylist/getStylistName').subscribe(
  data => {
    this.stylistDetails = data;
    // console.log(this.stylistName);
    // console.log(this.stylistName.length);
    this.countResults = this.stylistDetails.length;
  }
);