Question

我有以下使用加号和减号图标创建手风琴的代码。我也处理了切换功能。但是现在我想在ngFor里面循环使用多组元素。我不确定该怎么做。基本上我有一个resultJSON是json。我需要遍历resultArray json以获取标题和描述，并将其放置为手风琴标题和手风琴描述。我不确定如何动态替换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
        }
      ],
}

Answer 1

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

Answer 2

您使用的是 [ngClass] 错误。

您应该首先声明类名，然后使用变量评估是非。

示例：

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

此表达式表示当 someBoolean1 为 true 和 fa-minus 时，将应用 fa-plus 当 someBoolean2 为 true

时将应用

您可以使用ngClass尽可能多地应用类。

在您的情况下，您应该按照 toggle [i] 来处理是对还是错的评估，如下所示：

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

关于如何应用样式：通过对所需的每个元素使用 [ngStyle] =“ {'color'：exp}” 。注意，“ exp”表示表达式，该表达式应该是变量或函数，以求出颜色名称或代码。

示例：

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

如何使用ngFor手风琴在Angular中多次循环

HTML

ts。

JSON

2 个答案: