代码之家 › 专栏 › 技术社区 › Nancy

如何使用ngfor使手风琴在角度上循环多次

ngfor accordion toggle angular

Nancy · 技术社区 · 6 年前

我有下面的代码来创建使用加号和减号图标的手风琴。我也处理了切换功能。但现在我想在ngfor内部循环这个,以获得多组元素。我不知道该怎么做。基本上我有一个结果数组,它是一个JSON。我需要循环遍历resultArray json以获取标题和描述,并将其放置为accordion heading和accordion description。我不知道如何动态替换accord.id。

HTML

<div *ngFor = "let resulArray of resultArray">
     <div *ngFor="let accord of accordian;">
                  <div (click)="toggle(accord.id)" id="accordionTitle{{accord.id}}" class="accordionTitle active">{{accord.label}}
                    <i class="fa fa-minus" id="minus{{accord.id}}"></i>
                  </div>
                  <div id="{{accord.id}}" *ngIf="accord.id == 0" class="hidden-data show">
</div>
</div>

下面的切换是应用样式和图标从正到负的变化到手风琴。当调用切换函数时

TS.

this.accordian = [{
      id: 0, label: 'Accordion title'
    }];

toggle(id) {
    this.x = document.getElementById(id);
    this.y = document.getElementById('accordionTitle' + id);
    if (this.x.className.indexOf('show') === -1) {
      this.x.className += ' show';
      this.y.className += ' active';
      document.getElementById('minus' + id).classList.remove('fa-plus');
      document.getElementById('minus' + id).classList.add('fa-minus');
    } else {
      /*  this.x.className = this.x.className.replace('hide', ''); */
      this.x.className = ' hide';
      /*   this.y.className = this.y.className.replace('', ''); */
      this.y.className = 'accordionTitle';
      document.getElementById('minus' + id).classList.remove('fa-minus');
      document.getElementById('minus' + id).classList.add('fa-plus');
    }
}

JSON公司

resultArray = {
      'status': 'SUCCESS',
      'responseCode': '000',
      'errorMessage': null,
      'cboRequestList': [
          {
              'seqNo': 1,
              'applicableFor': '0',
              'applicableForText': 'Hide',
              'displayDesc': null,
              'displaySeqNo': 1,
              'description': 'ABCDisplayDesc1',
              'type': 'W',
              'content': null,
              'field1': null,
              'field2': null,
              'field3': null,
              'field4': null,
              'markerId': null,
              'markerLastModifiedTime': null,
              'countryCode': null,
              'languageCode': null,
              'commentMaker': null
          },
          {
            'seqNo': 2,
            'applicableFor': '0',
            'applicableForText': 'Hide',
            'displayDesc': null,
            'displaySeqNo': 1,
            'description': 'ABCDisplayDesc1',
            'type': 'W',
            'content': null,
            'field1': null,
            'field2': null,
            'field3': null,
            'field4': null,
            'markerId': null,
            'markerLastModifiedTime': null,
            'countryCode': null,
            'languageCode': null,
            'commentMaker': null
        }
      ],
}

2 回复 | 直到 6 年前

Nancy 6 年前

 <div class="row justify-content-md-center bussinessOffice">
  <div class="col-md-9 bussiness">
      <h3 class="mainTitile">Help</h3>
      <p class="bottom-30">
          How may i help you today ?
      </p>
<div *ngFor="let resultArrayText of cboRequestListArray; let i = index">
      <ul class="list-group bottom-30" (click)="toggle[i] = !toggle[i]">
          <li class="list-group-item"  ng-class="{'activateToggle': toggle[i], '': !toggle[i]}" >
              {{resultArrayText.description}}
              <i class="fa" [ngClass]="toggle[i] ? 'fa-plus': 'fa-minus'" aria-hidden="true"></i>
          </li>
          <div *ngIf="!toggle[i]" class="container activateToggle">
            <p class="content-30">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
              Lorem Ipsum has been the industry's standard dummy text ever since the 
              1500s
            </p>
              <p>
                <strong>Refer for more informations:</strong> <a>Click View Documents</a>
              </p>
              </div>
            </ul>
</div>


        </div> 
        </div>

monogate 6 年前

您正在使用 [ng类] 错了。

应该首先声明类名,然后用变量计算true或false。

例子:

<i class="fa " [ngClass]="{'fa-plus': someBoolean1, 'fa-minus': someBoolean2 }" aria-hidden="true"></i>

这个表达式意味着 Fa Plus公司 将在以下情况下应用 一些布尔1 将对和 Fa减 将在以下情况下应用 某些布尔值2 将对

您可以使用ngclass应用任意数量的类。

在您的情况下,您应该根据 切换[I] 这样地:

<i class="fa " [ngClass]="{'fa-plus': toggle[i], 'fa-minus': !toggle[i]}" aria-hidden="true"></i>

关于如何应用样式: 通过使用 [ngStyle]=“颜色”:exp” 对于您需要的每个元素。注意“exp”是指表达式,它应该是一个变量或函数,以计算颜色名称或代码。

例子:

exp = 'green';
<h1 [ngStyle]="{'color': exp }">My Text</h1>