データカードの値をAngular2で動的にロードする

Question

このデモカードは材料設計から得たもので、データベース値に基づいて複数のデータカードを表示するにはどうすればいいですか？

データベースの値が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); 
    } 
}