访问同一父级中另一个元素内的div元素

Question

我正在开发一个小角度的应用程序。下面是我的html片段。我希望div(id=metaoptions(在我点击img(id=myImg

<div>
<div #metaoptions id="metaoptions" class="meta-options" [hidden]="true" *ngFor="let option of metaOptions">
<span>{{option.label}}</span>
</div>
<img id="myImg" (click)="metaoptions.hidden = (!metaoptions.hidden)"  src="blabla.jpeg">
</div>

相同的方法在我的代码中的不同位置起作用。我切换了mouseover和mouseout事件的图像

<tr class="abc" (mouseover)="helpImg.hidden = false" (mouseout)="helpImg.hidden = true">
<td class="xyz">
{{setting.label}}
</td>
<td>
<div class="zxc" >
<mat-checkbox>
</mat-checkbox>
<img #helpImg [hidden]="true" class="help-img" src="/assets/icons/dark/help_img.svg" (click)="showHelp(setting.name)"/>
</div>
</td>
</tr>

Answer 1

在HTML中：

<div id="metaoptions" *ngIf="metaOptionsVisible"></div>
<img id="myImg" (click)="onClickImg()">

在您的TS中：

onClickImg() {
this.metaOptionsVisible = !this.metaOptionsVisible;
}