Angular 6 中的互斥按钮

Question

我在 ngFor 组件中有一组按钮，我希望它们是互斥的。我想设计它，当我单击一行中的第一个按钮时，在我单击同一行中的相应按钮之前不能再次单击它。这是我的 Typescript sn-p 和我创建的函数；

showTime(staff){
        staff.time = new Date();
     }
     displayTime(staff){

        staff.times = new Date();
    }    

这是我的 HTML sn-p;

    <tbody>
               <tr *ngFor="let staff of staffs" class="m-1 p-1 bg-light">
                    <td>
                        {{staff.name}}  
                    </td>
                    <td>
                            {{staff.department}}
                    </td>
                    <td>
                        <button [disabled]="!flagOne" (click)="showTime(staff)">Click</button>
                        <span *ngIf="staff.time">
                            Time: {{staff.time | date: 'shortTime'}}
                        </span>
                    </td>
                    <td>
                        <button [disabled]="!flagTwo" (click)="displayTime(staff)">Click</button>
                        <span *ngIf="staff.times">
                            Time: {{staff.times | date: 'shortTime'}}
                        </span>
                    </td>
                </tr>
           </tbody>

我的数组如下所示：

module.exports = function () {
  return {
    staff: [
        { id: 1, name: "xxx", department: "Development",
           role: "Team Lead", time: null },
        { id: 2, name: "xxx", department: "Development",
           role: "Back End", time: null },
        { id: 3, name: "xxx", department: "Security",
           role: "Front End",time: null },
        { id: 4, name: "xxx", department: "Infrastructure",
           role: "Corper", time: null },
        { id: 5, name: "xxx", department: "Infrastructure",
           role: "xxx", time: null },
           { id: 6, name: "xxx", department: "Management",
           role: "Assistant", time: null },
           { id: 7, name: "xxx", department: "Management",
           role: "Director", time: null }
                ],
    entries: []
}

Answer 1

在你的组件中创建两个标志，用这些标志控制按钮的disabled 属性。在调用showTime() 和displayTime() 方法时设置它们。

.ts

 export class AppComponent  {
  name = 'Angular';
  staff = {time: null};
  flagOne = true;
  flagTwo = true;
  showTime(staff){
    this.staff.time = new Date();
    this.flagOne = false;
    this.flagTwo = true;
  }

  displayTime(staff){
    staff.times = new Date();
    this.flagTwo = false;
    this.flagOne = true;
  }    
}

.html

 <td>
      <button [disabled]="!flagOne" (click)="showTime(staff)">Button One!</button>
      <span *ngIf="staff.time">
          Time: {{staff.time | date: 'shortTime'}}
      </span>
  </td>
  <td>
      <button [disabled]="!flagTwo" (click)="displayTime(staff)">Button Two!</button>
      <span *ngIf="staff.times">
          Time: {{staff.times | date: 'shortTime'}}
      </span>
  </td>

https://stackblitz.com/edit/angular-jwahcd?file=src%2Fapp%2Fapp.component.ts