Javascript 根据Angular2中的Dataabse值动态加载数据卡

我有这个来自material design的演示卡，如何根据数据库值显示多个数据卡

如果我的数据库中的值是4，那么我需要在UI中显示4个数据卡。 在我的例子中，后端数据库是mongoDB

<!-- Square card -->
<style>
.demo-card-square.mdl-card {
  width: 320px;
  height: 320px;
}
.demo-card-square > .mdl-card__title {
  color: #fff;
  background:
    url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
</style>

<div class="demo-card-square mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Update</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
    </a>
  </div>
</div>    

.demo-card-square.mdl-card{
宽度：320px；
高度：320px；
}
.demo card square>.mdl-card\u标题{
颜色：#fff；
背景：
url（'../assets/demos/dog.png'）右下角15%无重复#46B6AC；
}
更新
Lorem ipsum dolor sit amet，是一位杰出的献身者。
埃南·康瓦利斯。
查看更新

如果您有这样的数据卡型号

dataCard = {
 "title":"",
 "bodyText" : "",
 "actionText":""
};

//and your service returned an array of dataCard objects.

@Component({
   selector:'dataCard',
   template : `
<div *ngFor="#card of _dataList" class="demo-card-square mdl-card mdl-shadow--2dp">
   <div class="mdl-card__title mdl-card--expand">
     <h2 class="mdl-card__title-text">{{card.title}}</h2>
   </div>
  <div class="mdl-card__supporting-text">
    {{card.bodyText}}
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      {{card.actionText}}
    </a>
  </div>
</div>`
})
export class DataCard implements OnInit{
  private _dataList : Type;
  private other.....,

  constructor(service:Service){
  // setup
  }

  ngOnInit(){
   this.service.fetchDataForCards()
   .subscribe(data => this._dataList = data);
  }
}

数据卡={
“名称”：“名称”，
“正文”：“，
“actionText”：”
};
//您的服务返回了一组数据卡对象。
@组成部分({
选择器：'数据卡'，
模板：`
{{card.title}
{{card.bodyText}
{{card.actionText}
`
})
导出类数据卡实现OnInit{
私有数据列表：类型；
私人其他。。。。。，
建造商（服务：服务）{
//设置
}
恩戈尼尼特（）{
this.service.fetchDataForCards（）
.subscribe（数据=>this.\u数据列表=数据）；
}
}