Html 如何通过单击Typescript上的另一个按钮来启用按钮？

我有7个按钮。其中一个是编辑按钮。smb单击“编辑”之前，必须禁用除“编辑”之外的所有功能。我该怎么做？我想为所有按钮编写一个函数。可能吗？ 我是安格拉茨的新手

  <button class="btn btn-outline-primary " type="button">Edit</button>

    <button   class="btn btn-outline-primary " type="button">Assign</button>
    <button class="btn btn-outline-primary  " type="button">Start</button>
    <button class="btn btn-outline-primary " type="button">Resolve</button>
    <button class="btn btn-outline-primary " type="button">Ready for test</button>
    <button class="btn btn-outline-primary " type="button">ReOpen</button>
    <button class="btn btn-outline-primary " type="button">Close</button>

编辑
分配
开始
决定
准备好测试了吗
重开
关

参见上面的stackblitz

为此，我在编辑按钮上创建了一个单击事件

  <button class="btn btn-outline-primary " (click)="changeEditable()" type="button">Edit</button>

    <button   class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Assign</button>
    <button class="btn btn-outline-primary  " [disabled]="btnDisabled" type="button">Start</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Resolve</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Ready for test</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">ReOpen</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Close</button>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  btnDisabled = false;

  changeEditable() {
    console.log('changeEditable')
    this.btnDisabled = !this.btnDisabled;
  }
}