Angular组件通信父子组件不工作

Question

我在父子组件之间的通信方面有问题。我有一个多个项目的列表，我想放在一个子组件中，但由于另一个原因，他不会填充子对象，并给出了一个未定义的。父对象知道项目的数量，因此这是正确初始化的，并且在调试时也填充了对象。但是在孩子中，一个未定义的东西填充了我想要放置对象数据的每一张卡片。

让我们看看代码：

@NgModule({
  imports: [    
    BrowserModule,
    FormsModule,
    NgbModule,
    MaterialModule,
    AppRoutingModule,
    BrowserAnimationsModule,    
    LayoutModule    
  ],
  declarations: [    
    AppComponent,    
    PortalcardComponent,
    PortalcardsComponent,    
    ErrorPageComponent 
  ],  
  providers: [AuthGuardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

是关于portalcarccomponent组件，以及app.module.ts中的portalcarccomponent组件

<app-portalcards>        
</app-portalcards> 

这是app.component.html中的标签

import { Component, Output } from '@angular/core';
import { PortalCardData } from '../../../core/interfaces/portalcard'

@Component({
  selector: 'app-portalcards',
  templateUrl: './portalcards.component.html',  
  styleUrls: ['./portalcards.component.scss']
})
export class PortalcardsComponent {
  portalcards = PortalCardData;  
}

portalcards.component.ts

<app-portalcard *ngFor="let portalcard of portalcards">      
    [portalcard]="portalcard"
</app-portalcard>

portalcard.component.ts

import { Component, Input } from '@angular/core';
import { PortalCard } from '../../interfaces/portalcard'

@Component({
  selector: 'app-portalcard',
  templateUrl: './portalcard.component.html',
  styleUrls: ['./portalcard.component.scss']
})
export class PortalcardComponent{
  @Input() portalcard: PortalCard  
}

portalcard.component.html

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">{{portalcard.title}}</h5>
    <p class="card-text">{{portalcard.subtitle}}</p>
    <a href="" (click)="false" class="btn btn-primary mt-2">{{portalcard.button.title}}</a>
  </div>
</div>

它可能是很小的东西，但我看不出来:(.也许有人能帮我个忙。

谢谢。问候Marc

这些是google developer工具栏中的错误。2个项目。2个错误。

enter image description here

Answer 1

试试这个：

<app-portalcard *ngFor="let portalcard of portalcards" [portalcard]="portalcard">          
</app-portalcard>

而不是你的代码：

<app-portalcard *ngFor="let portalcard of portalcards">      
    [portalcard]="portalcard"
</app-portalcard>

Answer 2

在我看来，portalcards = PortalCardData是singular类型，而不是数组。应该首先将其定义为数组，以便可以使用*ngFor进行迭代。

您可以尝试将其更改为此portalcards = PortalCardData[]

并使用下面的代码正确插入输入

<app-portalcard *ngFor="let portalcard of portalcards" [portalcard]="portalcard">      
</app-portalcard>