输入'{类型代码：字符串； }[]' 不可分配给类型 'string[]'。 // Angular 9.1.15，打字稿

Question

我对angular不是很了解，正在学习中。下面我附上了我的 TS 文件。我正在使用自动完成 search/Type 提前搜索，我遇到了这些错误。

<----------------代码-------------------->

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：类型 '{ 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)
      

Answer 1

根据类型定义，我猜您传递的是 string 并希望根据它过滤对象数组。然后，您需要 return 对象数组而不是字符串数组。

您可以使用 Array#map with 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#maps。