Angular 仅在单击时显示特定按钮，其余按钮应相同

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

但剩余部分应为“加入骑行”按钮，但该按钮已被禁用。有人能帮我吗

---

请检查。

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

---

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

将应用程序类修改为以下内容：

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

选择一个城市：

{{ride.city}

搭便车
您的取车时间：上午8:30


取消
证实

发送请求

---

---

这里是一个指向工作plunker的链接：

它工作正常，但我想使用批量数据，比如每次我无法推送数据时，我不会只使用两个选项（海德拉巴/班格罗）结束数据，所以请您建议我如何使用索引，以便我可以只显示particulur div按钮您不需要索引方法。我想您将以json的形式获得批量数据。您可以将该json分配给您的重新请求。请参阅更新的答案和plunk链接。我已根据您的需要修改了plunk。我已进行了升级投票，但我的声望低于15，因此它不会显示Thnx以获得您的帮助

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>