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”具体做什么呢？