angular - 无法绑定到“字符”，因为它不是“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
  ],

酒店表行.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

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

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

查看这篇文章了解更多详情。