Q&A
前提・実現したいこと
ionic4を使ってion-cardを動的に表示したいです。
発生している問題・エラーメッセージ
tsにて配列を作成し、*ngforを使って配列内のアイテムを１つずつ表示するイメージだが、
カードが表示されません。
該当のソースコード
html
1<ion-header> 2 <ion-toolbar> 3 <ion-title> 4 Tab One 5 </ion-title> 6 </ion-toolbar> 7</ion-header> 8 9<ion-content> 10 <ion-card *ngFor="let cosme of cosmes"> 11 <ion-card-header> 12 <ion-card-title> 13 {{cosme.name}} 14 </ion-card-title> 15 </ion-card-header> 16 <ion-card-content> 17 {{cosme.brand}} 18 </ion-card-content> 19 </ion-card> 20</ion-content> 21
typescript
1import { Component } from '@angular/core'; 2 3@Component({ 4 selector: 'app-tab1', 5 templateUrl: 'tab1.page.html', 6 styleUrls: ['tab1.page.scss'] 7}) 8export class Tab1Page { 9 10 cosmes: Array<{name: string, brand: string}>; 11 12 constructor() { 13 this.cosmes = []; 14 } 15 16 ionViewDidLoad() { 17 18 this.cosmes = [ 19 { name: '化粧品１', brand: 'ブランド１'}, 20 { name: '化粧品２', brand: 'ブランド２'}, 21 { name: '化粧品３', brand: 'ブランド３'}, 22 ]; 23 } 24 25} 26
補足情報（FW/ツールのバージョンなど）
ionic4
回答1件
0
自己解決
<div>で囲んだら上手くいきました。
HTML
1<div *ngFor="let cosme of cosmes"> 2 <ion-card background="primary"> 3 <ion-card-header> 4 <ion-card-title> 5 {{cosme.name}} 6 </ion-card-title> 7 </ion-card-header> 8 <ion-card-content> 9 {{cosme.brand}} 10 </ion-card-content> 11 </ion-card> 12</div>
投稿2019/01/27 11:50
総合スコア53
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。