I am encountering a challenge with an Angular CLI component that involves working with an array of strings called "searchResult":
export class ParentComponent implements OnInit {
mockArray: string[] = [];
searchString: string = '';
searchResult: string[] = [];
constructor(private service: SomeService) {
}
ngOnInit(): void {
this.mockArray = this.service.getArray();
}
onKeyDown() {
if (this.searchString.length > 2) {
this.searchResult = this.mockArray.filter(symptom =>
symptom.includes(this.searchString)
)
}
}
}
Within this component, I am assigning the result of the filter method, executed on another string-array, to the searchResult variable. When passing this data down to a child component in its HTML template, I encounter an issue:
<child-component searchResult="{{searchResult}}"></child-component>
To receive and handle the variable in the child component, I utilize an @Input() declaration:
export class ChildComponent {
@Input() searchResult: string[] = [];
}
Despite both variables being arrays of strings, upon running ng serve, I receive an error related to the line in the parent component's HTML template:
error TS2322: Type 'string' is not assignable to type 'string[]'
This error arises even though both variables are meant to be arrays of strings and not just single strings.
Update: Upon investigation, it appears that the filter method is returning a concatenated string of all items instead of an array. The original array "mockarray" used for the filter looks like this:
[
'elevated midi-chlorian count',
'low self-esteem',
'urge to flip a table',
'headache',
'sore feet',
'loss of smell',
'hearing voices',
'pain in sole of the feet',
'breathlessness',
'shortness of breath',
'difficulty breathing',
'respiratory distress',
'pain in knee',
'stiff finger joints',
'back pain'
];