Angular 如何更改折叠和展开的图标？

下面是我的代码，我想在折叠和展开完成后上下更改图标。但不知怎么的，它不起作用了

<div class="attach-link">

                <a href="javascript:void(0);" *ngIf="fileData.fileDataType.canAttach && !isFinancialEntity" (click)="openFileInput(i)">
                    <i class="fa fa-plus"></i> Add Attachment</a>
                <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect [uploader]="fileData.uploader" (onFileSelected)="onFileSelected()"
                />
                <a class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                    <i class="fa fa-angle-up" ></i>                       

                    Attachments [{{fileData.fileList.length}}] </a>
            </div>

---

我不知道是什么问题。任何帮助都将不胜感激。非常感谢。

以下是角度上下折叠的示例代码

<div class="attach-link">
      <a href="javascript:void(0);"  (click)="openFileInput(i)">
              <i class="fa fa-plus"></i> Add Attachment</a>
            <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
            />
             <br>                
            <a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                <i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>    
                Attachments {{fileData.fileList.length}}                 
            </a>
 </div>

---

下面是在angular中向上和向下折叠的示例代码

<div class="attach-link">
      <a href="javascript:void(0);"  (click)="openFileInput(i)">
              <i class="fa fa-plus"></i> Add Attachment</a>
            <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
            />
             <br>                
            <a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                <i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>    
                Attachments {{fileData.fileList.length}}                 
            </a>
 </div>

---

添加到@sharma-vikram-answer中，如果有人想要修复上面解释的扩展-折叠问题，对于循环中的多个元素，可以按如下方式完成。 Obs：这是一个简单的解决方案，不使用ngbCollapse或材质

模板html：

...
<div *ngFor="let item of items">
  <div class="row">
   <div class="col" (click)="toggle(rowItem)" >
    <i class="fa" [ngClass]="{'fa-plus': rowItem.classList.contains('d-none'), 'fa-minus': !rowItem.classList.contains('d-none')}"></i>
   </div>
  </div>
  <div class="row" #rowItem>
    Value
  </div>
</div>

---

添加到@sharma-vikram-answer中，如果有人想要修复上面解释的扩展-折叠问题，对于循环中的多个元素，可以按如下方式完成。 Obs：这是一个简单的解决方案，不使用ngbCollapse或材质

模板html：

...
<div *ngFor="let item of items">
  <div class="row">
   <div class="col" (click)="toggle(rowItem)" >
    <i class="fa" [ngClass]="{'fa-plus': rowItem.classList.contains('d-none'), 'fa-minus': !rowItem.classList.contains('d-none')}"></i>
   </div>
  </div>
  <div class="row" #rowItem>
    Value
  </div>
</div>

---

*ngIf正在组件内部查找collapse属性。如果它不存在或您不切换它，图标将不会更改。将折叠特性添加到组件和切换其值的函数。在链接中添加一个单击处理程序，该处理程序将扩展调用该函数以切换折叠属性的列表。但它仍然不起作用。为什么要在Angular中使用jquery？您只需要添加@SharmaVikram，是的，谢谢，它工作得很好。但它会在所有列表项中展开。如何解决此问题？*ngIf正在查看组件内部的折叠属性。如果它不存在或您不切换它，图标将不会更改。将折叠特性添加到组件和切换其值的函数。在链接中添加一个单击处理程序，该处理程序将扩展调用该函数以切换折叠属性的列表。但它仍然不起作用。为什么要在Angular中使用jquery？您只需要添加@SharmaVikram，是的，谢谢，它工作得很好。但它会在所有列表项中展开。如何解决此问题？什么错误？它是否说“类列表”未定义？你用的是什么浏览器？IE9不支持类列表属性yin.ts我有类似toggleitem、index{let selector=`.row num-${index}`；let sections=document.querySelectorAll.row num'；document.querySelectorselector.classList.toggle'd-none'；}所以这里我应该使用element.classList.toggle'd-none'；再次？请在valores.classList.contains'd-none'中告诉我什么是valores？哦…它应该是'rowItem'，而不是'valores'…我刚刚修复了它，感谢您，除非您发布模板html，否则无法看到代码中的错误；我建议你在SOF上写另一个问题，同时发布，ts和html，这样我们可以检查什么是错误的什么错误？它是否说“类列表”未定义？你用的是什么浏览器？IE9不支持类列表属性yin.ts我有类似toggleitem、index{let selector=`.row num-${index}`；let sections=document.querySelectorAll.row num'；document.querySelectorselector.classList.toggle'd-none'；}所以这里我应该使用element.classList.toggle'd-none'；再次？请在valores.classList.contains'd-none'中告诉我什么是valores？哦…它应该是'rowItem'，而不是'valores'…我刚刚修复了它，感谢您，除非您发布模板html，否则无法看到代码中的错误；我建议你在SOF上写另一个问题，同时发布，ts和html，这样我们就可以检查出什么问题了

...
public toggle( element: HTMLElement) {
  element.classList.toggle('d-none');
}