Как добавить конкретное изображение по id в методе get в ionic

Question

У меня есть 2 состояния любого изображения. Я передаю его на сервер.

is_banner: 0 или 1

1 - это баннер, а 0 - не

Теперь я хочупривести изображение с результатами 1 на определенной карте, а другое на определенной карте.

Кроме того, я хочу привести определенное изображение по идентификатору (я хочу, чтобы отображалось только одно изображение)

Этомой HTML-код:

<ion-col *ngFor="let photo of gallery"   col-12>
    <ion-card>
        <ion-card-content>
            <img  src="http://{{photo.image_url}}"  (click)="showImage(photo)">
        </ion-card-content>
    </ion-card>
</ion-col>

TS-код:

export class GalleryPage {
    private loading:Loading;
    private loadingShown:Boolean = false;
    private subscriptions:Array<Subscription> = [];
    private gallery = new Array<Photo>();

    constructor(private toastCtrl: ToastController, public navCtrl: NavController, private service:ApiClient, private loadingCtrl:LoadingController, private alertCtrl:AlertController, private photoViewer:PhotoViewer) {
        this.loadPhotos();
    }

    loadPhotos() {
        this.presentLoading('جاري التحميل');
        let subscription:Subscription = this.service.galleryList(window.localStorage.getItem('api_key')).subscribe(data => {
        this.gallery = data;

        this.dismissLoading();
        }, err=> {
            console.log('خطأ !!!');
            this.dismissLoading();
            this.presentErrorAlert("تأكد من اتصالك بالانرنت ");
        });
        this.subscriptions.push(subscription);
    }

и это данные JSON:

[
    {
        "id": 4,
        "image_url": "example.com/storage/nbA7GrL1XcibrBZ0VH3W5BQYGqtD97BYKq34fGFi.jpeg",
        "is_banner": 1,
        "created_at": "2018-12-31 18:10:20",
        "updated_at": "2018-12-31 19:29:06"
    }
]

Answer 1

Есть несколько способов решить эту проблему.Это самый простой способ - создать два массива из массива галереи следующим образом:

export class GalleryPage {
    private loading:Loading;
    private loadingShown:Boolean = false;
    private subscriptions:Array<Subscription> = [];
    public bannerGallery = new Array<Photo>();
    public standardGallery = new Array<Photo>();

    constructor(private toastCtrl: ToastController, public navCtrl: NavController, private service:ApiClient, private loadingCtrl:LoadingController, private alertCtrl:AlertController, private photoViewer:PhotoViewer) {
        this.loadPhotos();
    }

    loadPhotos() {
        this.presentLoading('جاري التحميل');
        let subscription:Subscription = this.service.galleryList(window.localStorage.getItem('api_key')).subscribe(data => {
       if(data && data.length) {
          this.bannerGallery = data.filter(el => el. is_banner === 1 );
          this.standardGallery = data.filter(el => el. is_banner === 0 );
       }
        this.dismissLoading();
        }, err=> {
            console.log('خطأ !!!');
            this.dismissLoading();
            this.presentErrorAlert("تأكد من اتصالك بالانرنت ");
        });
        this.subscriptions.push(subscription);
    }

, после чего вы можете циклически перебрать эти два разделенных массива по отдельности:

<!-- Banner images -->
<ion-col *ngFor="let photo of bannerGallery"   col-12>
    <ion-card>
        <ion-card-content>
            <img  src="http://{{photo.image_url}}"  (click)="showImage(photo)">
        </ion-card-content>
    </ion-card>
</ion-col>
<!-- Standard images -->
<ion-col *ngFor="let photo of standardGallery"   col-12>
    <ion-card>
        <ion-card-content>
            <img  src="http://{{photo.image_url}}"  (click)="showImage(photo)">
        </ion-card-content>
    </ion-card>
</ion-col>

Другой способ добиться этого -создав канал, который фильтрует ваш массив и возвращает элементы в соответствии с фильтром, поэтому вам не нужно создавать разные массивы.