目前正在进行Angular5课程,经过一段时间的研究后,我仍然完全不了解以下内容:
码:
App.component.html:
<app-server-element *ngFor="let serverElement of serverElements" [element]="serverElement" ></app-server-element>
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: 'server',name:'Testserver',content:'just a test!'},{type: 'server',content:'just a test!'} ]; }
服务器element.component.html:
<p> <strong *ngIf="element.type === 'server'" style="color: red"> {{ element.content }}</strong> <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em> </p>
服务器element.component.ts:
import { Component,OnInit,Input } 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}; }
题:
我对这部分的作用有点困惑:
*ngFor="let serverElement of serverElements" [element]="serverElement"
在我目前的理解中,它是一个for循环,循环遍历serverElementsArray的所有元素.但那么[element] =“serverElement”具体做什么呢?
解决方法
你完全正确地了解了serverElementsArray的所有元素.
使用[element] = …绑定组件的输入.继续阅读…