[英]Type '{ typecode: string; }[]' is not assignable to type 'string[]'. // Angular 9.1.15, TypeScript
I do not have good idea about angular, i am learning.我对 angular 不太了解,我正在学习。 Below i have attached my TS file.下面我附上了我的 TS 文件。 I am working on Auto complete search/Type ahead search and i am facing these errors.我正在研究自动完成搜索/提前输入搜索,我正面临这些错误。
<----------------Code--------------------> <----------------代码-------------------------------->
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);
}
}
<-------------------Error------------------------> <--------------------错误------------>
src/app/app.component.ts:65:5 - error TS2322: Type '{ typecode: string; src/app/app.component.ts:65:5 - 错误 TS2322: Type '{ typecode: string; }[]' is not assignable to type 'string[]'. }[]' 不能分配给类型 'string[]'。 Type '{ typecode: string;键入'{类型代码:字符串; }' is not assignable to type 'string'. }' 不可分配给类型“字符串”。
return this.objectOptions.filter(option =>
option.toLowerCase().includes(filterValue)
);
src/app/app.component.ts:66:14 - error TS2339: Property 'toLowerCase' does not exist on type '{ typecode: string; src/app/app.component.ts:66:14 - 错误 TS2339: 类型 '{ typecode: string; 上不存在属性'toLowerCase' }'. }'。
option.toLowerCase().includes(filterValue)
Based on the type definitions, I'd guess you're passing a string
and want to filter the array of objects based on it.根据类型定义,我猜您正在传递一个string
并希望根据它过滤对象数组。 You'd then need to return array of objects instead of array of strings.然后,您需要返回对象数组而不是字符串数组。
You could use Array#map
with Array#filter
.您可以将Array#map
与Array#filter
一起使用。 Try the following尝试以下
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
}
Or to use your existing implementation of the _filter
function, you could use the commented out options
variable (array of strings) instead of the array of objects objectOptions
.或者要使用_filter
function 的现有实现,您可以使用注释掉的options
变量(字符串数组)而不是对象数组objectOptions
。
Array#filter
更新:仅使用Array#filter
See the comment by @Random below to use only the Array#filter
without the need for redundant Array#map
s.请参阅下面@Random 的评论,仅使用Array#filter
而无需多余的Array#map
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.