Невозможно привязать к 'showdatabasedropdown', поскольку оно не является известным свойством 'app-searchbox'

Question

У меня есть компонент с именем, SearchboxComponent.

<table class="table">
  <thead>
    <tr>
      <td class="searchtd">
        <div class="has-feedback">
          <form class="input-typeahead-form">
            <input [(ngModel)]="input"
                   [ngModelOptions]="{standalone: true}"
                   placeholder="Enter Text"
                   class="form-control"
                   type="text"
                   (click)="dropdownOpen = true"
                   (keydown.escape)="dropdownOpen = false"
                   (blur)="dropdownOpen = false">

            <ux-typeahead #typeahead
                          class="typeahead-example"
                          [(open)]="dropdownOpen"
                          [filter]="input"
                          [options]="loadOptionsFn"
                          [openOnFilterChange]="true"
                          [pageSize]="40"
                          [selectOnEnter]="selectOnEnter"
                          [selectFirst]="selectFirst"
                          [dropDirection]="dropDirection"
                          (optionSelected)="input = $event.option">
            </ux-typeahead>
          </form>
        </div>
      </td>
      <td>
        <div class="col-md-3">
          <button type="button" class="m-b btn button-primary">Search</button>
        </div>
      </td>
    </tr>
    <tr *ngIf="showdatabasedropdown">
      <td colspan="3">
        <app-idoldatabasedropdown></app-idoldatabasedropdown>
      </td>
    </tr>
  </thead>
</table>

Файл ts для этого компонента выглядит следующим образом:

import {Component, ViewChild} from '@angular/core';
import 'chance';
import { TypeaheadKeyService } from '@ux-aspects/ux-aspects';
import { of } from 'rxjs';
import { delay, map, tap } from 'rxjs/operators';
import { TypeAheadService } from 'src/app/search/content/typeahead.service';
import { LoggerService } from 'src/app/common/logging/logger.service';
import { IdoldatabasedropdownComponent } from '../idoldatabasedropdown/idoldatabasedropdown.component';

@Component({
  selector: 'app-searchbox',
  templateUrl: './searchbox.component.html',
  styleUrls: ['./searchbox.component.css']
})
export class SearchboxComponent {
  @ViewChild(IdoldatabasedropdownComponent)
  values: Array<string> = [];
  showdatabasedropdown = true;
  dropdownOpen = false;
  selectOnEnter = true;
  dropDirection: 'up' | 'down' = 'down';
  selectFirst = true;

  input = '';

  loadOptionsFn = this.loadOptions.bind(this);

  /** Load the options and filter the them */
  loadOptions(pageNum: number, pageSize: number, filter: string): Promise<Array<string>> {

    return this.svcTypeAhead.getTermExpand(filter).pipe(
      tap((array) => console.log('Page: ' + pageNum, 'Filter: ' + filter, array)),
      map((array: string[]) => array.slice(pageNum * pageSize, (pageNum + 1) * pageSize))
    ).toPromise();
  }

  constructor(private svcTypeAhead: TypeAheadService, private logger: LoggerService ) {
  }
}

Я использую этот компонент в другом angular component HTML вот так

<app-searchbox></app-searchbox>

Я бы хотел установить свойство showdatabasedropdown в самом шаблоне как

<app-searchbox [showdatabasedropdown]="false"></app-searchbox>

Однако я не могу сделать это, потому что я получаю следующую ошибку.

Can't bind to 'showdatabasedropdown' since it isn't a known property of 'app-searchbox'.

Answer 1

Вам необходимо использовать @Input(), чтобы пометить это свойство как input property.

Ваш код должен выглядеть следующим образом:

@Input() showdatabasedropdown = true;

После того, как вы украсите свойство с Input передать данные из родительского шаблона, как вы только что сделали.