Question

我的列表正在从外部API获取信息，我是动态创建它的，当我使用（click）方法单击“ li”元素（我创建了10个元素）时，会显示一堆信息（第二个ul列表）。问题是我要禁用所有其他未被单击的元素（其他所有9个元素），直到我取消单击之前单击的那个元素为止。总结我想一次只能单击1个元素，此时必须同时禁用其他元素。有人可以解释/告诉我该怎么做吗？

<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>

Answer 1

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

currentListItem = 'name';

<li *ngIf="currentListItem === 'name' (click)='currentListItem = 'name'">...</li>
<li *ngIf="currentListItem === 'climate' (click)='currentListItem = 'climate'">...</li>
<li *ngIf="currentListItem === 'terrain' (click)='currentListItem = 'terrain'">...</li>

Answer 2

尝试一下：

TS：

let currNodeList1 = l1, currNodeList2 = l2;  //assuming that l1 and l2 point to head of linked list 
let resultListHead = null, currNodeResultList = null;  //to store the result
let carry = 0, sum = 0;
while(currNodeList1 != null && currNodeList2 != null) {
    sum = carry + currNodeList1.val + currNodeList2.val;
    carry = Math.trunc(sum / 10);   
    sum = sum % 10;

    let newListNode = new ListNode(sum);
    if(currNodeResultList == null) {
        resultListHead = newListNode;
    } else {
        currNodeResultList.next = newListNode;
    }
    currNodeResultList = newListNode;
    currNodeList1 = currNodeList1.next;
    currNodeList2 = currNodeList2.next;
}

if(currNodeList1 == null) {   //other list is longer in length
    while(currNodeList2 != null) {
         // calculate sum as carry + currNodeList2.val
         //same carry logic and keep appending to the end of the result list
    }
}

if(currNodeList2 == null) {   //other list is longer in length
    while(currNodeList1 != null) {
         //calculate sum as carry + currNodeList2.val
         //same carry logic and keep appending to the end of the result list
    }
}

HTML：

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
  }
}

CSS：

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

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

2 个答案: