Ahora, estoy tratando de encontrar la manera de vincular la entrada con el botón de la fila de botones para abrir la imagen siguiendo el ejemplo del Sr. ruth . Sin embargo, la fila de botones en mi aplicación web tiene el mismo formato que este: topnav.component.html:

 <button mat-button *ngFor="let item of toolNavItems" (click)='onTopNavClick(item)' [class.active]="item.selected" [title]="item.title" > <mat-icon [class]="item.icon">{{item.icon}}</mat-icon> </button>

topnav.component.ts:

 export class TopnavComponent implements OnInit { @Output() topnavSelect: EventEmitter<ToolNavItem> = new EventEmitter(); toolNavItems: ToolNavItem[]; constructor( private sketchService: SketchService, ) { } ngOnInit(): void { this.sketchService.menusObs.pipe(untilDestroyed(this)).subscribe(menus => { this.toolNavItems = menus; }); } onTopNavClick(selectedTopnavItem: ToolNavItem) { this.topnavSelect.emit(this.sketchService.selectMenu(selectedTopnavItem)); } }

La entrada oculta para abrir la imagen para mostrar será algo como esto:

 <input #inputFile class="ng-hide" style="display:none;" name="file" multiple type="file" accept=".jpg, .png, .jpeg, .JPG, .PNG, .JPEG" (change)="getFiles($event)"/>

¿Cómo puedo vincular la entrada al botón en particular de acuerdo con el valor del elemento o elemento.título, que es la única forma de separar la fila del botón del botón elegido?

Aquí están los valores del elemento para el botón en la clase sketchService que quiero vincular el evento onclick del botón para hacer clic() función de variable de referencia de plantilla Angular [(click)="inputFile.click()"] :

 { id: 'upload_image', title: 'Upload Image for Blending', icon: 'image', type: 'passive' }

Por favor, dime cómo hacer eso. Inicialmente, considero usar *ngIf para detectar el valor de item.id como la forma de asignar la función adecuada para el evento onclick del botón de acuerdo con el siguiente pseudocódigo:

 *ngIf item.id is 'upload_image' (click)="inputFile.click()" else (click)="onTopNavClick(item)"

Sin embargo, el artículo*ngIf y *ngFor en el mismo elemento que causa el error me ha obligado a pensar dos veces. Ha dicho que usar la ID del elemento HTML sería una mejor alternativa, pero me pregunto cómo puedo detectar la ID del elemento HTML para Angular. Por favor dame un consejo.