javascript - 根据 Angular 2 中的数据库值动态加载数据卡

Question

我有这个 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>    

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