特定のボタンonclickのみを表示する、残りは同じである必要があります

Question

確定ボタンをクリックすると、特定のボタン をに送信に変更する必要があります。

残りはJOIN RIDEボタンと同じにする必要がありますが、無効になっています。誰も私にこれを手伝うことができますか？

linkをご確認ください。

Answer 1

問題は、同じ変数を使用してすべてのアイテムの確認パネルを非表示にしていることです。

---

あなたが乗るの要求を格納するためのクラスを作成することができます：

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

を次のようにあなたのアプリケーションクラスを変更します。

これを修正するには、次の操作を行うことができます

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