时间戳

首页 > 解决方案 > 如何根据 ngModel 值将组件中的“if、else、else if”转换为 switchcase 场景？

angular - 如何根据 ngModel 值将组件中的“if、else、else if”转换为 switchcase 场景？

问题描述

我有一个按钮，可以在上传时预览图像。目前，要使用相同的单击事件停止所有按钮并因此显示相同的图像，我在组件中有一个 if、'else if'、'else' 条件来定义基于 HTML 中的 ngModel 预览时要显示的图像. 我想知道是否可以将其转换为 switch-case 场景？该代码有效，但我确信有一种更简洁或不那么单一的方式来编写它。我在想开关盒可能是更好的方法。

组件.ts

preview() {
    var mimeType = this.fileData.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(this.fileData);
    reader.onload = (_event) => {
      if (this.selectedLeagueBadge) {
        this.leagueBadgePreviewUrl = reader.result;
      } else if (this.selectedAwayBadge) {
        this.awayBadgePreviewUrl = reader.result;
      } else if (this.selectedHeader) {
        this.headerPreviewUrl = reader.result;
      } else {
        this.previewUrl = reader.result;
      }
    }
  }

.component.html

   <li>
    <button class="update" (click)="openForm('club_badge')">
    {{ show_form['club_badge'] ? 'Close' : 'Change Image' }}
    </button>
   </li>
   <ng-container *ngIf="show_form['club_badge']">
      <input type="file" name="club_badge 
      [(ngModel)]="selectedClubBadge"
      (change)="fileProgress($event)" accept=".jpg,.svg,.png,.jpeg">
      <div class="image_preview" *ngIf="previewUrl">
        <img [src]="previewUrl | safe:'resourceUrl'">
      </div>
      <button class="update (click)="uploadImage($event)">Upload</button>
   </ng-container>

其他 ngModel 值

<input type="file" name="home_page_background" 
[(ngModel)]="selectedHomePageBackgroundImage"
(change)="fileProgress($event)" accept=".jpg,.svg,.png,.jpeg">

<input type="file" name="default_header" 
[(ngModel)]="selectedHeader"
(change)="fileProgress($event)" accept=".jpg,.svg,.png,.jpeg">

在上面有没有办法区分 selectedHomePageBackgroundImage 和 selectedHeader 以创建开关？

如前所述，这可行，但我认为这可能会更好，并且通过搜索网络，我得到了很多关于 ngSwitchCase DOM 实例的 switch-case 文档，这不是我所指的。

以前有没有人解决过这个问题？

标签： angular

解决方案

推荐阅读