时间戳

首页 > 解决方案 > 使用 Angular 具有动态模型名称的可点击分区

javascript - 使用 Angular 具有动态模型名称的可点击分区

问题描述

我需要创建可点击的动态 div。目前我正在使用下面的代码来做到这一点。我的服务

export class ReserveService {

  constructor(private http: HttpClient) { }

  getLockers(): Observable<Lockers[]> {
    return this.http.get<Lockers[]>('https://jsonplaceholder.typicode.com/albums');

  }

}

组件代码

  ngOnInit() {
    this.loadLockers();
  }

 loadLockers() {
this.availableLockers = this.reserveService.getLockers();

}

请检查上面的代码。我正在使用下面的 html 来循环它

      <a *ngFor="let locker of availableLockers | async" class="col-md-3 p-3 m-3 success"
                            contenteditable="true" style="border: 1px solid #ccc; background-color: brown;">
                            <label>
                                <input id="lk{{locker.id}}" [value]='locker.id' type="radio" name="locker"
                                    checked="false" [(ngModel)]="locker.id">
                                {{locker.title}}
                            </label>
                        </a>

目前一切正常。但事情是当我单击 div 时，没有选中单选按钮。我怎么做？或者你知道这些时间要求的任何适当的技术。

图片

标签： javascriptangular

解决方案

除了使用标签，您可以使用 div 标签并执行以下操作 -

<div *ngFor="let locker of availableLockers | async; let index = index" class="col-md-3 p-3 m-3 success"
                            contenteditable="true" style="border: 1px solid #ccc; background-color: brown;" (click)="currentSelection = index">
                            <label>
                                <input [value]='locker.id' type="radio" name="locker"
                                    [checked]="getCurrentSelection(index)">
                                {{locker.title}}
                            </label>
                        </div>

在组件 Ts 文件中 =>

currentSelection :number

getCurrentSelection=(indexSelected)=>{
return currentSelection == indexSelected
}

推荐阅读