无法绑定到 '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
  ],

酒店-table-row.component.ts:

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

export class HotelTableRowComponent implements OnInit {

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

酒店-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

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

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

查看 post 了解更多详情。