ngFor 无法通过与 @Input 的组件绑定来迭代另一个组件

Posted 2023-02-23

【中文标题】ngFor 无法通过与 @Input 的组件绑定来迭代另一个组件

【英文标题】：ngFor not able to iterate in another component through component binding with @Input

【发布时间】：2021-07-03 11:58:09

【问题描述】：

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  serverElements :[type:"blueprint",name:"abnc",content:'Just A Test'];

app.component.html

<div class="container">
 

  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [childElement]="serverElement">abc</app-server-element>
    </div>
  </div>
</div>

src-->app-->服务器元素

server-element.component.ts

import  Component, Input, OnInit  from '@angular/core';

@Component(
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
)
export class ServerElementComponent implements OnInit 
 @Input('childElement') element:type:string,name:string,content:string;

 constructor()  

  ngOnInit(): void 
  

服务器元素.component.html

<div class="panel panel-default">
  <div class="panel-heading">Hello</div>
  <div class="panel-body">
    <p>
      <strong *ngIf="element.type ==='server' " style="color: red;">  element.content </strong>
      <em *ngIf="element.type==='blueprint'"> element.content </em>
    </p>
  </div>
</div>

它应该通过 迭代单个 serverElements。但它没有做，虽然我正在学习的课程（Maximilian Schwarzmuller）代码工作正常..帮助

【参考方案1】：

您错过了 serverElements 的分配。它应该有一些价值，你只需声明类型。

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  // assign the value, you declare it as type but it was emplty
  serverElements = [
     type: "blueprint", name: "abnc", content: "Just A Test" 
  ];