类型 '{ 类型代码：字符串； }[]' 不可分配给类型 'string[]' // Angular 9.1.15，打字稿 更新：仅使用 Array#filter

如何解决类型 '{ 类型代码：字符串； }[]' 不可分配给类型 'string[]' // Angular 9.1.15，打字稿 更新：仅使用 Array#filter

我对角度不太了解，我正在学习。下面我附上了我的 TS 文件。我正在处理自动完成搜索/提前键入搜索，但我正面临这些错误。

import { Component,OnInit } from '@angular/core';   
import { Title } from '@angular/platform-browser';    
import { FormControl } from '@angular/forms';    
import { Observable } from 'rxjs';    
import { map,startWith } from 'rxjs/operators';    


import { BciImprintComponent,logoutComponent,ModalWindowService,NavigationService,SidebarNavItem,} from '@bci-web-core/core';


@Component({   
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']   
})   
export class AppComponent implements OnInit {   
  //options: string[] = ['CytroPac','CytroBox','GoPakTM'];    
  objectOptions = [   
    { typecode: 'CytroPac' },{ typecode: 'CytroBox' },{ typecode: 'GoPakTM' }   
  ];   
  myControl = new FormControl();   
  filteredOptions: Observable<string[]>;   

  title = 'Your application';   
  sidebarLinks: SidebarNavItem[] = [];   
  sidebarFooterLinks: SidebarNavItem[] = [   
    {   
      title: 'Maja Mustermann',overlay: {   
        component: logoutComponent,config: { title: 'Do you want to logout?',onlogout: () => this.logout() }   
      },icon: 'Bosch-Ic-user'   
    },{   
      id: 'imprint',cb: () => this.onAbout(),title: 'Imprint',icon: 'Bosch-Ic-information'   
    }   
  ];   

  constructor(private titleService: Title,private navigationService: NavigationService,private modalWindowService: ModalWindowService) {   
  }   

  ngOnInit() {   
    this.titleService.setTitle(this.title);   
    this.getSidebarLinks().subscribe(sidebarLinks => this.sidebarLinks = sidebarLinks);   
    this.filteredOptions = this.myControl.valueChanges.pipe(   
      startWith(''),map(value => this._filter(value))   
    );   
  }   

  private _filter(value: string): string[] {   
    const filterValue = value.toLowerCase();   
    return this.objectOptions.filter(option =>   
      option.toLowerCase().includes(filterValue)   
    );   
  }      

  getSidebarLinks(): Observable<SidebarNavItem[]> {  
    return this.navigationService.getNavigationItems();   
  }   
 

  onAbout() {   
    this.modalWindowService.openDialogWithComponent(BciImprintComponent);   
  }  
  

}   

src/app/app.component.ts:65:5 - 错误 TS2322: Type '{ typecode: string; }[]' 不可分配给类型 'string[]'。 类型 '{ 类型代码：字符串； }' 不可分配给类型 'string'。

 return this.objectOptions.filter(option =>
   
  option.toLowerCase().includes(filterValue)

 );

src/app/app.component.ts:66:14 - 错误 TS2339：属性 'toLowerCase' 不存在于类型 '{ typecode: string; }'。

 option.toLowerCase().includes(filterValue)
      

解决方法

根据类型定义，我猜您正在传递 string 并希望基于它过滤对象数组。然后你需要返回对象数组而不是字符串数组。

您可以将 Array#map 与 Array#filter 一起使用。试试下面的

private _filter(value: string): string[] {   
  const filterValue = value.toLowerCase();
  return this.objectOptions
    .map(objectOption => objectOption.option) // produces ['CytroPac','CytroBox','GoPakTM']
    .filter(option => option.toLowerCase().includes(filterValue))
    .map(option => ({ typecode: option }));   // map back to array of objects
}      

或者要使用现有的 _filter 函数实现，您可以使用注释掉的 options 变量（字符串数组）而不是对象数组 objectOptions。

更新：仅使用 Array#filter

请参阅下面@Random 的评论，仅使用 Array#filter 而无需多余的 Array#map。