#javascript #html #typescript #ionic-framework #ionic3
#javascript #HTML #typescript #ionic-framework #ionic3
Вопрос:
Я пытаюсь отобразить элемент массива внутри цикла.
result: {
"success": true,
"message": "Categories Found",
"code": 200,
"data": {
"total": 5,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"next_page_url": null,
"prev_page_url": null,
"from": 1,
"to": 5,
"data": [
{
"id": 8,
"asset_id": 76,
"parent_id": 12,
"lft": 12,
"rgt": 13,
"level": 2,
"path": "clothes/women",
"extension": "com_content",
"title": "Women",
"alias": "women",
"note": "",
"description": "",
"published": 1,
"checked_out": 496,
"checked_out_time": "2019-04-05 11:25:34",
"access": 1,
"params": "{"category_layout":"","image":"images\/themeparrot\/banner-category\/banner.png","image_alt":"women"}",
"metadesc": "",
"metakey": "",
"metadata": "{"author":"","robots":""}",
"created_user_id": 496,
"created_time": "2017-10-06 07:34:39",
"modified_user_id": 496,
"modified_time": "2017-12-05 12:39:35",
"hits": 0,
"language": "*",
"version": 1
},
{
"id": 9,
"asset_id": 78,
"parent_id": 12,
"lft": 14,
"rgt": 15,
"level": 2,
"path": "clothes/men",
"extension": "com_content",
"title": "Men",
"alias": "men",
"note": "",
"description": "",
"published": 1,
"checked_out": 0,
"checked_out_time": "0000-00-00 00:00:00",
"access": 1,
"params": "{"category_layout":"","image":"images\/themeparrot\/banner-category\/banner_02.png","image_alt":"men"}",
"metadesc": "",
"metakey": "",
"metadata": "{"author":"","robots":""}",
"created_user_id": 496,
"created_time": "2017-10-06 07:42:58",
"modified_user_id": 496,
"modified_time": "2017-12-05 12:39:40",
"hits": 0,
"language": "*",
"version": 1
},
Приведенное выше является ответом Api. Это функция цикла, в которой необходимо отобразить изображение в параметрах.
и мой ts:
displaycategory(){
this.showLoader();
this.categories.categorydisplay().then((result) => {
console.log('result:' JSON.stringify(result));
this.loading.dismiss();
this.data = JSON.parse(JSON.stringify(result));
this.categorydata = JSON.parse(JSON.stringify(this.data.data.data));
}), (err) => {
console.log(err);
this.loading.dismiss();
}
}
и HTML:
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >
<ion-card *ngIf="tms.parent_id == 12">
<img src="{{tms.params.image}}">
<div class="card-title">{{tms.title}} </div>
<div class="card-subtitle"></div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
В этом html мне нужно показать изображение.
Комментарии:
1. Что это за ужас
JSON.parse(JSON.stringify())
? Пожалуйста, опубликуйтеresult
без предварительной строки. Если вы получите данные как есть, исправьте серверную часть.
Ответ №1:
Вам нужно попробовать использовать приведенный ниже объект result json напрямую
this.categorydata = this.result.data.data;
Ответ №2:
вам нужно указать свой базовый URL перед путем к изображению следующим образом.
ts-файл объявляет базовый URL
export class HomePage implements OnInit {
public baseurl='http://baseurl.xyz/';
constructor(
public navCtrl: NavController
) {
}
затем просто добавьте этот базовый URL перед своим path
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let tms of categorydata;" (click)="test($event, tms.id)" >
<ion-card *ngIf="tms.parent_id == 12">
<img src="{{baseurl tms.params.image}}">
<div class="card-title">{{tms.title}} </div>
<div class="card-subtitle"></div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
У меня это работает.
Ответ №3:
Сначала вы должны изменить свой ts, чтобы правильно обработать результат:
-
Вы используете
this.data.data.data
там, где это должно бытьthis.data.data
. -
Вы должны анализировать только
params
поле, которое является строкой
displaycategory(){
this.showLoader();
this.categories.categorydisplay().then((result) => {
console.log('result:' JSON.stringify(result));
this.loading.dismiss();
this.data = JSON.parse(JSON.stringify(result));
this.categorydata = this.data.data.map(({params, ...rest}) => ({...rest, params: JSON.parse(params)}));
}), (err) => {
console.log(err);
this.loading.dismiss();
}
}
Я думаю, что таким образом это должно сработать.
Не забудьте в следующих вопросах подробно описать ошибку, которую вы получаете.