Question

我正在开发ANGULAR项目，因为我创建了必须在多个组件中使用的卡片组件

card.html

<mat-card class="card grid-container">
  <div class="grid-item">
    <mat-card-title><strong>{{data.title}}</strong></mat-card-title>
    <ul>
      <li *ngFor="let a of data.list">{{a.name}}</li>
    </ul>
    <mat-card-content>
      <p>{{data.desc}}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LEARN NOW</button>
    </mat-card-actions>
  </div>
  <div class="grid-item">
    <img mat-card-image class="image" src="{{data.img}}">
  </div>
</mat-card>

card.ts

import { MatCardModule} from '@angular/material';
export class CardComponent implements OnInit {
    @Input() data: any;
}

otherComponent.html

<div class = "grid-container">
        <app-card *ngFor ="let item of data" [data] = item ></app-card>
</div>

otherComponent.ts

export class otherComponent implements OnInit {
   data = [{
        title:'Computer Application',
        img:'assets/images/ce.jpg'
   }];
}

我已经将card组件导入到上述两个组件的父组件模块中 parent.module.ts

import { CardComponent } from './card/card.component';
import { MatCardModule } from '@angular/material/card';

@NgModule({
    imports: [
        CommonModule,
        ParentRoutingModule,
        TranslateModule,
        MatCardModule,
        NgbDropdownModule.forRoot()
    ],
    declarations: [ParentComponent , CardComponent]
})
export class ParentModule {}

面对以下错误

ERROR in : Can't bind to 'data' since it isn't a known property of 'app-card'.
1. If 'app-card' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'app-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

请帮帮我？谢谢

无法在角度为4的多个组件中使用自定义组件

0 个答案: