Question

我有一组按钮，它们在ngFor组件中希望互斥。我要设计的是，当我单击一行中的第一个按钮时，直到我单击同一行中的相应按钮时，才能再次单击它。这是我的Typescript代码段以及我创建的功能；

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

        staff.times = new Date();
    }

这是我的HTML代码段；

    <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

角度6中的互斥按钮

1 个答案: