无法绑定到'showdatabasedropdown'，因为它不是'app-searchbox'的已知属性]]

Question

我是Angular的新手，所以请和我裸露。

我有一个称为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 ) {
  }
}
我正在像这样的另一个有角度的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'.
请帮助。 

我是Angular的新手，所以请和我裸露。我有一个名为SearchboxComponent的组件。

... [

Answer 1

您需要使用@Input()将该属性标记为input属性。