时间戳

首页 > 解决方案 > 输入'Observable<{ LOC_NA: any; }>' 缺少类型“Location[]”的以下属性：length、pop、push、concat 等 25 个

angular - 输入'Observable<{ LOC_NA: any; }>' 缺少类型“Location[]”的以下属性：length、pop、push、concat 等 25 个

问题描述

我正在尝试在值更改时使用角度材料自动完成来填充下拉列表，但我不断收到以下错误。

          Type 'Observable<{ LOC_NA: any; }>' is missing the following properties from type 
          'Location[]': length, pop, push, concat, and 25 more.

下拉列表应该从 json 文件中填充数据。我使用以下文档作为参考https://material.angular.io/components/autocomplete/examples

请在下面找到代码：

HTML

           <input type="text" placeholder={{constant.RENTALLOCATION}} matInput 
            formControlName="filteredRentalLocation" [matAutocomplete]="auto" 
            [ngModel]="commonService.selectedRentalLocation">

            <mat-autocomplete #auto="matAutocomplete">
              <mat-option  *ngFor="let option of filteredLocationOptions | async" [value]="option">
                {{option.CCRG_CORP_CD}} {{option.LOC_NA}}
              </mat-option>
            </mat-autocomplete>

TS

          export interface Location {
            CCRG_CORP_CD: any;
            LOC_MNEM_CD: any;
            CITY_NA: any;
            LOC_NA: any;
         }

         export class CreateReservationHomeComponent implements OnInit {
          filteredLocationOptions: Observable<Location[]>;
          
          ngOnInit() {
               this.initCreateResForm();
             //this.createresService.fetchLocationDetails().pipe(map((res:any) =>  res.json()))

         this.filteredLocationOptions = 
               this.createResForm.get('filteredRentalLocation')!.valueChanges
               .pipe(
               startWith(''),
               map(value => this._filterGroup(value)))
          }

          private _filterGroup(value: string): Location[]{
                if(value){
      return this.createresService.fetchLocationDetails()
        .pipe(map(locs => ({LOC_NA: locs.LOC_NA }))) <--- //error here
               }
           }

服务TS

     locationDetailsURL = url + 'assets/Locations/aulocs.json';

     fetchLocationDetails(): Observable<Location[]>{
    return this.http.get<Location[]>(this.locationDetailsURL, {withCredentials: true})

JSON数据

    [
      {
        "LOC_MNEM_CD":"XYZ", 
        "CCRG_CORP_CD":"B",
        "CITY_NA": "sddfs",
        "LOC_NA": "werwer",
      },
      {
        "LOC_MNEM_CD":"MCD", 
        "CCRG_CORP_CD":"A",
        "CITY_NA": "werwer",
        "LOC_NA": "wwew",
      }
    ]

标签： angularangular-materialangular8

解决方案

我想到了。我需要过滤 locs 数组。

    private _filterGroup(value: string): Observable<Location[]>{
      return this.createresService.fetchLocationDetails()
          .pipe(map(locs => locs.filter (option => {
       return option.LOC_NA.toLowerCase().indexOf(value.toLowerCase()) === 0 })))
    }

推荐阅读