Angular 动态列表上的角度禁用按钮

我的列表是从外部API获取信息，我动态创建它，当我用（单击）方法单击'li'元素（我创建了10个）时，会显示一堆信息（第二个ul列表）。问题是，我想禁用所有其他未单击的元素（所有其他9个），直到我松开之前单击的元素。我希望能够一次只点击一个元素，其他元素必须在那一刻禁用。 有人能解释一下/告诉我怎么做吗

<ng-container>
  <div class="wrapper">
    <ul class="exteriorUL" *ngFor="let planet of results$; let i = index;">
      <li (click)="hidden[i] = !hidden[i]">
          <b class="btn btn-success">{{planet.name}}</b>
      </li>
      <ul class="interiorUL" [hidden]="!hidden[i]">
        <li>
            <span>Rotation period:</span> {{planet.rotation_period}} h
        </li>
        <li>
            <span>Orbital period:</span> {{planet.orbital_period}} days
        </li>
        <li>
            <span>Climate:</span> {{planet.climate}}
        </li>
        <li>
            <span>Planet terrain:</span> {{planet.terrain}}
        </li>
        <li>
          <span>Population:</span> {{planet.population}}
        </li>
        <li>
            <span>Gravity:</span> {{planet.gravity}}
        </li>
        <li>
            <span>Diameter:</span> {{planet.diameter}} km
        </li>

        <hr>
      </ul>
    </ul>
  </div>
</ng-container>

{{planet.name}


自转周期：{行星自转周期}}h


轨道周期：{行星轨道周期}天


气候：{{planet.Climate}}


行星地形：{{Planet.terrain}


人口：{planet.Population}


重力：{{planet.Gravity}}


直径：{{行星直径}}公里

只需在变量中保存一个值，然后让该变量决定显示哪个li：

currentListItem='name'；

只需在变量中保存一个值，然后让该变量决定显示哪个li：

currentListItem='name'；

试试这个：

TS:

HTML:

试试这个：

TS:

HTML:

---

“其他li在那一刻必须禁用。”你的意思是其他li不可单击？没错，其他li在那一刻不可单击，除非我取消选中我单击的“其他li在那一刻必须禁用”。你的意思是其他li不可单击？没错，其他li在那一刻不可单击，除非我将取消选中我单击的一个，否则我将阻止所有这些，但idk为什么会导致它看起来很智能，并且应该像这样工作集

clickedItem:string='Mercury'设置TSi的第一个li名称我知道我理解你的代码，但它会阻止所有元素也阻止我单击的元素你尝试过这个：
clickedItem:string='Mercury'
解决了添加->clickItem（）{this.isAnyItemClicked=！this.isAnyItemClicked；}顺便说一句，非常感谢你的帮助，没有你的帮助我不能这样做再次感谢！它阻止了所有这些，但idk为什么会导致它看起来很聪明，并且应该像下面这样工作
clickedItem:string='Mercury'设置TSi的第一个li名称我知道我理解你的代码，但它会阻止所有元素也阻止我单击的元素你尝试过这个：
clickedItem:string='Mercury'
解决了添加->clickItem（）{this.isAnyItemClicked=！this.isAnyItemClicked；}顺便说一句，非常感谢你的帮助，没有你的帮助我不能这样做再次感谢！
isAnyItemClicked:boolean = false;
clickedItem:string = 'Mercury'; // I guessed the name Mercury, set the appropiate name which you want to enable

clickItem(){
  if(this.clickedItem == ''){
     this.isAnyItemClicked = false
  } else {
     this.isAnyItemClicked = true
  }
}

<li (click)="clickItem();clickedItem= planet.name" [class.disabled]="isAnyItemClicked && clickedItem != planet.name">...</li>

.disabled {
    pointer-events: none;
    opacity: 0.6;
}