时间戳

首页 > 解决方案 > 键入'{类型代码：字符串；}[]' 不能分配给类型 'string[]'。// Angular 9.1.15，TypeScript

angular - 键入'{类型代码：字符串；}[]' 不能分配给类型 'string[]'。// Angular 9.1.15，TypeScript

问题描述

我对角度没有好主意，我正在学习。下面我附上了我的 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[]'。键入'{类型代码：字符串；}' 不可分配给类型“字符串”。

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

 );

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

 option.toLowerCase().includes(filterValue)

标签： angulartypescripttypeahead

解决方案

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

你可以使用Array#mapwith 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 的评论，仅使用sArray#filter而无需多余Array#map的 s。

推荐阅读