Angular中组件传值（含别名方式）无显示问题求助

问题现象 #

将server-element组件引入AppComponent模板后，页面无任何内容渲染，尝试别名传值和直接传值两种方式均无效。

相关代码 #

server-element组件（别名传值版本） #

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('srvElement') element: { type: string, name: string, content: string };
  constructor() { }

  ngOnInit(): void { }
}

server-element组件模板 #

<div class="panel panel-default">
  <div class="panel-heading">{{ element.name }}</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>

AppComponent #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server' , name: 'TestServer', content: 'Just a test!'}];
}

AppComponent模板（别名传值版本） #

<div class="container">  
<hr>  
<div class="row">  
<div class="col-xs-12">     
<app-server-element                       
   *ngFor=" let servetElement of serverElements"                         
[srvElement]="serverElement"></app-server-element>    
</div>  
</div>
</div>

AppModule #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CockpitComponent } from './cockpit/cockpit.component';
import { ServerElementComponent } from './server-element/server-element.component';

@NgModule({
  declarations: [
    AppComponent,
    CockpitComponent,
    ServerElementComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

直接传值版本的修改 #

server-element组件修改

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() element: { type: string, name: string, content: string };
  constructor() { }

  ngOnInit(): void { }
}

AppComponent模板修改

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

问题根源 #

在AppComponent模板的*ngFor循环中，变量名拼写错误：

• 循环定义的变量是servetElement（多了一个t）
• 绑定属性时使用的是serverElement（正确拼写）

由于变量名不匹配，组件无法接收到有效数据，因此不会渲染任何内容。

解决方法 #

统一*ngFor的变量名和绑定的变量名，修改AppComponent模板：

别名传值版本修正后模板 #

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

直接传值版本修正后模板 #

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

修改后，组件能正确接收到serverElements数组中的数据，即可正常渲染预期内容。

内容的提问来源于stack exchange，提问作者user15360673