Question

我在复选框中显示了以下数据

roomLists = {'4': {'name': 'Standard Room', 'typeID': '4', 'price': 100}, '5': {'name': 'Delux Room', 'typeID': '5', 'price': 100}}

使用http检索此json对象。出于测试目的，我将其存储在房间清单中。

使用管道，数据在模态

中正确显示

 <app-modal #modal1>
   <div class="app-modal-body">
    <div *ngFor="let room of roomLists | jsonPipe">
     <label>
      <input type="checkbox"/>{{room.name}}
     </label>
   </div>
 </div>

但是当我尝试点击复选框时，它没有点击。是代码中缺少的东西。

Answer 1

猜猜你正在将checkbox与自己的label配对，你可以尝试给id复选框，然后给label for一个绑定到<div *ngFor="let room of roomLists | jsonPipe; let i = index;"> <label for="{{'checkbox' + i}}"> <input id="{{'checkbox' + i}}" type="checkbox"/>{{room.name}} </label> </div>的属性复选框的ID。

.diamond {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 0;
  position: relative;
  top: 0;
  border: 50px solid rgba(0,0,0,0);
  border-top-width: 0;
  border-bottom: 70px solid #1abc9c;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
}

.diamond::after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  top: 70px;
  left: -50px;
  border: 50px solid rgba(0,0,0,0);
  border-top: 70px solid #1abc9c;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: none;
}

如何使用angularjs 4中的json对象处理复选框

1 个答案: