根据 Angular 2 中的数据库值动态加载数据卡答案

【问题标题】：Dynamically load data cards based on Dataabse value in Angular2根据 Angular 2 中的数据库值动态加载数据卡
【发布时间】：2016-09-17 04:21:01
【问题描述】：

我有这个材料设计的演示卡，如何根据数据库值显示多个数据卡。

如果我的数据库中的值为 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>

【问题讨论】：

标签： javascript mongodb angular material-design

【解决方案1】：

如果你有这样的数据卡模型。

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);
  }
}

【讨论】：