Angular 组件通信 parent - child 不工作

Question

我在 parent - child 组件之间的通信有问题。我有一个包含多个项目的列表，我想将其放入 child 组件中，但另一方面，他不会填写 child object 并给出未定义。 parent object 知道项目的数量，因此它被正确初始化并且还通过调试填充了 object。但是在 child 中，一个未定义的字段用于填充我要放置 object 数据的每张卡片。

让我们看看代码:

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

是关于 portalcarc 组件，app.module.ts

中的 portalcards 组件

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

它可能有点小，但我没看到它:(。也许有人可以帮我。

谢谢。问候马克

这些是 google 开发人员工具栏中的错误。 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 是单数类型而不是数组。它应该首先定义为一个数组，以便可以使用 *ngFor.

对其进行迭代

你可以试试改成这样 portalcards = PortalCardData[]

并以此正确插入输入

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

Angular 组件通信 parent - child 不工作

Angular component communication parent - child not working

parent-child

angular-components

angular