Как отключить ion-thumbnail, когда нет доступных изображений - PullRequest
Новая
       2

Как отключить ion-thumbnail, когда нет доступных изображений

2 голосов
/ 07 мая 2020

Я создал ion-card, который отображает как изображения, так и документы, хранящиеся в приложении. Я пытаюсь выключить ion-thumbnail, когда [src]="img.path" пуст. Я пробовал *ngIf != "[src]= ''" на ion-thumbnail, но без радости.

. html 

 <ion-card>
    <ion-card-content> 
      <div class = "fileButtons">
        <ion-button  fill="outline" (click)="selectImage()">
          Add Photo
          <ion-icon slot="start" name="camera"></ion-icon>
        </ion-button>
        <ion-button  fill="outline" (click)="getFile()">
          Add Files
          <ion-icon slot="start" name="document"></ion-icon>
        </ion-button>
      </div>
      <ion-list>
        <ion-item *ngFor="let img of images; index as pos" class="ion-text-wrap">
          <ion-thumbnail slot="start" *ngIf !="[src]= ' '">
            <ion-img [src]="img.path" alt="No preview"></ion-img>
          </ion-thumbnail>
          <ion-textarea auto-grow="true" >{{ img.name }}</ion-textarea>
          <ion-button slot="end" fill="clear" (click)="deleteImage(img, pos)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

.ts 

loadStoredImages_Documents() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];
      arr  = arr.filter(a => a.includes("questionid_" + this.sectionUUID));
      for (let img of arr) {
        let filePath = this.file.dataDirectory + img;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: img, path: resPath, filePath: filePath });
      }
    }
  });
}

1 Ответ

1 голос
/ 10 мая 2020

Если вы хотите отображать ion-thumbnail только тогда, когда img.path существует, вы можете использовать: 

<ion-thumbnail slot="start" *ngIf="img.path">
      <ion-img [src]="img.path" alt="No preview"></ion-img>
</ion-thumbnail>

В этом случае оставшуюся часть ion-item, такую ​​как имя и кнопка удаления, будет там. 

images = [
      {
        id: 0,
        name: 'First image',
        path: ''
      },
      {
        id: 1,
        name: 'Second image',
        path: 'https://lh6.googleusercontent.com/-wUTN0hVj-6I/AAAAAAAAAAI/AAAAAAAAACA/EOUkVyZSMNY/photo.jpg?sz=128'
      },
      {
        id: 2,
        name: 'Third image',
        path: 'https://lh6.googleusercontent.com/-wUTN0hVj-6I/AAAAAAAAAAI/AAAAAAAAACA/EOUkVyZSMNY/photo.jpg?sz=128'
      }
]

enter image description here

...