angular - 编辑按钮单击获取图像名称并显示使用角度选择的输入文件

Question

当我单击编辑按钮时，我希望能够删除“未选择文件”以添加category.ImageName 。在输入中添加了[(ngModel)]="category.ImageName"但它不起作用。

<div *ngIf="category.FileSource.length > 0; else customAvatar">
                                <input 
                                formControlName="File"
                                id="File" 
                                type="file" 
                                [value]="category.ImageName"
                                [(ngModel)]="category.ImageName"
                                (change)="onFileChange($event)"/>
                               
                                <img *ngIf="chnageeventimage==='true'; else changeAvatar" [src]="imageSrc || '../../../../../assets/images/camera.jpg'" style="height: 80px; width:80px">
                                <ng-template #changeAvatar>
                                <img  [src]="category.FileSource" style="width:80px; height:80px;" alt="User avatar" />
                            </ng-template> 

零件：

ngOnInit(): void {
    debugger;
    const categoryID: string = this.route.snapshot.queryParamMap.get('categoryID');
     this.api.EditCategory(categoryID).subscribe(data =>{
      console.log(data);
      this.category = data;
    });
  }

输出

标签： angularasp.net-mvc

Answer 1

您可以隐藏输入并自定义 div 或按钮，如下所示：

<div *ngIf="category.FileSource.length > 0; else customAvatar">
                                <input 
                                id='browse'
                                style='width:0px'
                                type="file" 
                                (change)="onFileChange($event)"/>
                                
                                <button onclick="browse.click()">Upload image</button>
                                
                                {{category.ImageName}}
                               
                                <img *ngIf="chnageeventimage==='true'; else changeAvatar" [src]="imageSrc || '../../../../../assets/images/camera.jpg'" style="height: 80px; width:80px">
                                <ng-template #changeAvatar>
                                <img  [src]="category.FileSource" style="width:80px; height:80px;" alt="User avatar" />
                            </ng-template>