angular - 无法绑定(bind)到 'character'，因为它不是 'tr' 的已知属性

Question

导入，变量声明完成。仍然抛出错误。另请阅读 SO 上的旧问题。

app.module.ts:

import { HotelTableComponent } from './hotel-table/hotel-table.component';
import { HotelTableRowComponent } from './hotel-table-row/hotel-table-row.component';

@NgModule({
  declarations: [
    AppComponent,
    HotelTableComponent,
    HotelTableRowComponent
  ],

hotel-table-row.component.ts:

@Component({
  selector: 'app-hotel-table-row',
  .....

export class HotelTableRowComponent implements OnInit {

  @Input() character: any;
  @Input() columns: string[];

hotel-table.component.html:

  <table>
    <tr>
      <th *ngFor="let c of columns">{{c}}</th>
    </tr>

    <tr *ngFor="let ch of characters | async" 
    app-hotel-table-row
    [character]="ch" 
    [columns]="columns">
    </tr>

  </table>

控制台:

compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'character' since it isn't a known property of 'tr'. ("
    <tr *ngFor="let ch of characters | async" 
    app-hotel-table-row
    [ERROR ->][character]="ch" 
    [columns]="columns">
    </tr>
"): ng:///AppModule/HotelTableComponent.html@7:4
Can't bind to 'columns' since it isn't a known property of 'tr'. ("
    app-hotel-table-row
    [character]="ch" 
    [ERROR ->][columns]="columns">
    </tr>

"): ng:///AppModule/HotelTableComponent.html@8:4

Answer 1

为了将组件绑定(bind)到属性，您需要将组件名称放在方括号中，因为组件选择器是实际的 CSS 选择器，并且在 CSS 中按名称选择属性，您必须将其放在方括号中。试试这个

selector: '[app-hotel-table-row]'

查看this发帖了解更多详情。