只顯示特定的按鈕onclick，其餘應該是相同的

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> 

---

這裏是工作plunker鏈接：https://plnkr.co/edit/hYF0BuFeRo07Vr4nn2u4?p=preview