我正在开发预订离子应用程序的公交车票，我的应用程序有一个页面，用户可以选择他的行程的座位位置。我的实际问题是从某些条件禁用这些座位（复选框）。这些座位是从数据库加载的。它们是具有3个属性的对象; “数字”，“状态”和“检查”。条件如下：
- 如果“status”属性为false，则自动禁用座位。这在页面加载时执行
- 每次选择一个座位时，它都会调用一个函数，该函数将check属性设置为true并计算所选检查的数量 框。如果所选框的数量等于定义的“限制” 变量，禁用所有带有错误“检查”属性的复选框。
问题在于，这两个条件在它们分开时完美运行，但在合并时，它们不再起作用。条件来自此fiddle project
座位是从ts中的功能生成的。上述条件仅适用于第一排产生的座椅用于测试目的。其他行只应用了第一个条件
这是源代码
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Loading, LoadingController, Platform } from 'ionic-angular';
import { BusProvider } from '../../providers/bus/bus';
import firebase from 'firebase';
@IonicPage({
name: 'bus-plan'
})
@Component({
selector: 'page-bus-plan',
templateUrl: 'bus-plan.html',
})
export class BusPlanPage {
seatList = [];
busSeats = firebase.database().ref('/agency/bus/0/seats');
public loading: Loading;
person: any;
public ticketdata = {
departure: '',
destination: '',
date: '',
hour: '',
adult: 0,
children: 0,
class: '',
}
booked = false;
backSeats = [65, 66, 67, 69, 70];
public BusSize = {
line1: [],
line2: [],
line3: [],
line4: [],
}
limit = 3;
checked = 0;
constructor(public navCtrl: NavController, public platform: Platform, public loadingCtrl: LoadingController, public navParams: NavParams) {
console.log(this.limit)
this.getBookingData();
}
ionViewWillEnter() {
this.busSeats.once('value', snapshot => {
this.seatList = snapshot.val();
}).then(seat => {
if (seat)
this.initArrays();
else
console.log("error")
}).catch(error => {
console.log(error)
});
}
checkLimit(a, b) {
if (a && b)
return true
else
return false
}
controlCbx(seat) {
console.log(seat.check)
seat.check = !seat.check
if (seat.check)
this.checked++
else
this.checked--
console.log(this.checked)
}
initArrays() {
var s1 = 15;
var s2 = 31;
var s3 = 47;
for (var i = 0; i <= 16; i++) {
this.BusSize.line1[i] = this.seatList[i - 1];
}
console.log(this.seatList)
for (var j = 0; j <= 16; j++) {
this.BusSize.line2[j] = this.seatList[j + 15];
}
for (var m = 0; m <= 16; m++) {
this.BusSize.line3[m] = this.seatList[m + 31];
}
for (var k = 0; k <= 16; k++) {
this.BusSize.line4[k] = this.seatList[k + 47];
}
this.BusSize.line1.shift();
this.BusSize.line2.shift();
this.BusSize.line3.shift();
this.BusSize.line4.shift();
this.BusSize.line4.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line4.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line3.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line2.map((obj) => {
obj.check = false;
return obj;
});
this.BusSize.line1.map((obj) => {
obj.check = false;
return obj;
});
console.log(this.BusSize)
}
disableCbx() {
let x = window.document.getElementById('checkbox');
x.setAttribute
}
getArraysValue1(val) {
return this.BusSize.line2[val].number;
}
getArraysValue2(val) {
return this.BusSize.line3[val].number;
}
getArraysValue3(val) {
return this.BusSize.line4[val].number;
}
getBookingData() {
this.ticketdata.departure = this.navParams.get('departure');
this.ticketdata.destination = this.navParams.get('destination');
this.ticketdata.date = this.navParams.get('date');
this.ticketdata.hour = this.navParams.get('hour');
this.ticketdata.adult = this.navParams.get('adult');
this.ticketdata.children = this.navParams.get('children');
this.ticketdata.class = this.navParams.get('class');
this.person = this.navParams.get('children') + this.navParams.get('adult');
console.log(this.ticketdata)
}
goToConfirm(): void {
this.navCtrl.push('confirmation', {
'departure': this.ticketdata.departure,
'destination': this.ticketdata.destination,
'date': this.ticketdata.date,
'hour': this.ticketdata.hour,
'children': this.ticketdata.children,
'adult': this.ticketdata.adult,
'class': this.ticketdata.class,
});
console.log(this.ticketdata)
}
ionViewDidLoad() {
}
stringToBoolean(string) {
switch (string.toLowerCase().trim()) {
case "true": case "yes": case "1":
return true;
case "false": case "no": case "0":
return false;
default:
return Boolean(string);
}
}
}<ion-header no-border>
<ion-navbar hideBackButton=false color="transparent-20">
<ion-title>
<span class="title">Select your seats</span>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="key">
<div id="available" class="keyseats"></div>
<div>Available</div>
<div id="selected" class="keyseats"></div>
<div>Selected</div>
<div id="booked" class="keyseats"></div>
<div>Booked</div>
</div>
<div class="cabin">
<ion-grid class="row">
<!-- Row 1 from 1-16 -->
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line1; let i = index" id="row1">
<ion-col class="seat">
<input class="checkbox" type="checkbox" (change)="controlCbx(seats)" value="{{seats.number}}" id="{{seats.number}}" [disabled]="(seats.status=='false' checked==limit && !BusSize.line1[i].check) ? true : false "
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
<!-- Row 2 from 17-32 -->
<div style="position:absolute; margin-left: 1em;">
<div style="position:relative; width:2.7em; margin-left: 3em;" *ngFor="let seats of BusSize.line2" id="row2">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 3 from 33-48 -->
<div style="position:absolute; right: 0; margin-right: 5.7em;">
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line3" id="row3">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 4 from 49-64 -->
<div style="position:absolute; right: 0; margin-right: 1.6em;">
<div style="position:relative; width:2.7em;" *ngFor="let seats of BusSize.line4" id="row4">
<ion-col class="seat">
<input type="checkbox" value="{{seats.number}}" id="{{seats.number}}" ng-model="num" [disabled]="!stringToBoolean(seats.status)"
/>
<label class="seatlabel" for="{{seats.number}}">{{seats.number}}</label>
</ion-col>
</div>
</div>
<!-- Row 5 from 65-69 -->
<ion-row id="row5" class="seats">
<ion-col *ngFor="let seats of backSeats;" class="seat seat2">
<input (change)='test()' type="checkbox" value="{{seats}}" id="{{seats}}" />
<label for="{{seats}}">{{seats}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<button ion-button block (click)='goToConfirm()' icon-right color="light">
CONFIRM <ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
</ion-content>
答案 0 :(得分：0)
我认为问题在于为复选框添加了已禁用的检查条件。作为更好的代码可维护性的建议，您可以创建像canSelectSeats（）这样的函数，并在disabled属性中使用它，而不是在html中添加逻辑内联。该函数将通过检查下面的条件返回一个布尔值。
在页面的.ts文件中
canSelectSeats(seats, index):boolean {
return this.checked < limit && seats.status=='false' && !BusSize.line1[index].check;
}
在html页面
[disabled]="canSelectSeats(seats, i)"
*我不确定最后一行1 [索引]检查条件是否适用，因此您可以根据需要进行更改。