Question

当我点击确认按钮时，按下特定按钮需要更改为请求已发送。

但剩下的应该是 JOIN RIDE 按钮，但它会被禁用。任何人都能帮助我吗？

请查看link。

Answer 1

问题是您使用相同的变量来隐藏所有项目的确认面板。要更正此问题，您可以执行以下操作：

您可以创建一个类来存储乘车请求：

export class RideRequest{
  constructor(city:string){
    this.city = city;
  }
  city: string;
  requestSent:boolean;
  requestConfirmed:boolean;
  joinRequested:boolean;
}

将App类修改为以下内容：

export class App {

  rideRequests:RideRequest;

  constructor() { 
      this.rideRequests = [{'city':'Hyderabad'},
                           {'city':'Banglore'},
                           {'city':'New Delhi'},
                           {'city':'Mumbai'},
                           {'city':'Gujrat'},
                           {'city':'Pune'}];
   }

  joinRequested(ride:RideRequest) {
    ride.joinRequested = true;
    console.log(ride);
  }
  confirmRide(ride:RideRequest) {
    ride.requestConfirmed = true;
    console.log(ride);
  }
  cancelRide(ride:RideRequest) {
    ride.joinRequested = false;
    ride.requestConfirmed = false;
    console.log(ride);
  }
}

然后，将组件模板修改为以下内容：

<div>
  <div class="conform">
    Select one city:

    <div class="details" *ngFor="let ride of rideRequests;let i = index">
      <hr />
      <p>{{ride.city}}</p>
       <div *ngIf="!ride.joinRequested && !ride.requestConfirmed">
        <button (click)="joinRequested(ride)" class="joinRide">JOIN RIDE</button>
      </div>
      <div  class="dialogBoxStyle" *ngIf="ride.joinRequested && !ride.requestConfirmed">
        <p>Your Pickup Time: 8:30AM </p>
        <p>
          <button (click)="cancelRide(ride)">Cancel</button>
          <button (click)="confirmRide(ride)">Confirm</button>
        </p>
      </div>
      <div *ngIf="ride.requestConfirmed">
        <button class="joinRide reqSents" (click)="Requestclick(ride)">
           Request Sent
        </button>
      </div>
    </div>
  </div>
</div>

以下是工作人员的链接：https://plnkr.co/edit/hYF0BuFeRo07Vr4nn2u4?p=preview

只显示特定按钮onclick，剩余应该是相同的

1 个答案: