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
  ],

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

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

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

查看this帖子了解详情。

无法绑定到＆＃39;字符＆＃39;因为它不是'tr＆＃39; tr'的已知属性。

1 个答案: