Angular @Input of type string-array recognized as string-CodePudding

I have an Angular CLI component that contains an array of strings "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)
      )
    }
  }
}

In this component, I re-assign the result of the filter method executed on another string-array to the searchResult. In its html template, I want to pass it down to a child component:

<child-component searchResult="{{searchResult}}"></child-component>

And in the child component, I receive the variable via an @Input() declaration:

export class ChildComponent {

  @Input() searchResult: string[] = [];

}

However, on ng serve, I receive an error regarding the line in the html template of the parent componment:

error TS2322: Type 'string' is not assignable to type 'string[]'

I receive this error despite both variable being an array of strings and not just a string.

Edit: I just found out, for some reason the filter method returns a string of all the items passing the condition, instead of an array of these items. However, the original array "mockarray" that I call filter() on 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'
  ];

CodePudding user response：

Try using Attribute Bindinng insted of string interpolation:

<child-component [searchResult]="searchResult"></child-component>

CodePudding user response：

You should pass searchResult to child-component like below

<child-component [searchResult]="searchResult"></child-component>

I think it's better to read the ng doc too

https://angular.io/guide/inputs-outputs