How to use *ngFor and *ngIf in Angular?

Question

Here I have three div which are rendered using *ngFor , a div has an image , imageName and imagesize .

When the imageName extension is wrong (see third div ) or has no extension (see first) I want to disable the button's dblclick . How can I do that?

<div>
 <mat-card *ngFor="let imagespayload of uploadedImagesObj" (click)="activeFolder=imagespayload"
  (dblclick)="previewFiles(imagespayload.folderid,imagespayload.imageName,imagespayload.urloffolder)"
  (contextmenu)="onRightClick($event,imagespayload)">

  <div *ngIf="getExstendsionIfNotExtension(imagespayload.imageName);else noExtension">
    <img [src]="http://localhost:3000/{{imagespayload.urloffolder}}/{{imagespayload.imageName}}" style="height:40px;width:40px">
    <h3>{{imagespayload.imageName}}</h3>
    <h4>{{imagespayload.imagesize}}</h4>
  </div>

  <ng-template>
    <h5>No Extension of File..</h5>
  </ng-template>
 </mat-card>
</div>

public getExstendsionIfNotExtension(image) {
  if(image.endsWith('jpg') || image.endsWith('jpeg') || image.endsWith('gif') || image.endsWith('png') || 
    image.endsWith('tiff') || image.endsWith('tif') || image.endsWith('pdf')) {
     return true;
  }
}

Answer 1

Personally, I'd handle whether or not the event actually does anything in the event handler itself. Thus, I'd write the following:

<div>
  <mat-card *ngFor="let imagespayload of uploadedImagesObj"
    (dblclick)="preview(imagespayload.folderid, imagespayload.imageName, imagespayload.urloffolder)">

    <div *ngIf="hasPreviewableExtension(imagespayload.imageName);else noExtension">
    </div>
  </mat-card>
</div>

public preview(folderid, fileName, urloffolder) {
  if(!this.hasPreviewableExtension(fileName) {
    return;
  }

  // Your code here.
}

public hasPreviewableExtension(fileName) {
  const suffixes = ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'tif', 'pdf'];
  return suffixes.some(suffix => fileName.endsWith(suffix));
}

Note that I did change the names a bit, because this is not only about images, but also PDF files.

Answer 2

In your TS file :

public getExstendsionIfNotExtension(image) {
  return image.endsWith('jpg') || image.endsWith('jpeg') || image.endsWith('gif') || image.endsWith('png') || 
    image.endsWith('tiff') || image.endsWith('tif') || image.endsWith('pdf')
}

In your template file :

<div>
 <mat-card *ngFor="let imagespayload of uploadedImagesObj" (click)="activeFolder=imagespayload"
  (dblclick)="previewFiles(imagespayload.folderid,imagespayload.imageName,imagespayload.urloffolder)"
  (contextmenu)="onRightClick($event,imagespayload)">

  <div *ngIf="getExstendsionIfNotExtension(imagespayload.imageName)">
    <img [src]="http://localhost:3000/{{imagespayload.urloffolder}}/{{imagespayload.imageName}}" style="height:40px;width:40px">
    <h3>{{imagespayload.imageName}}</h3>
    <h4>{{imagespayload.imagesize}}</h4>
  </div>

  <ng-template *ngIf="!getExstendsionIfNotExtension(imagespayload.imageName)">
    <h5>No Extension of File..</h5>
  </ng-template>
 </mat-card>
</div>

Answer 3

在垫板上使用disable属性代替*ngIf

[disabled]="!getExstendsionIfNotExtension(imagespayload.imageName)'