PrimeNG 停止打开手风琴

Question

如何在 PrimeNG 中强制不打开手风琴。我的意思是在某些情况下，我不希望我选择的手风琴打开。这种方式我试过了，但是不行

https://www.primefaces.org/primeng/showcase/#/accordion

  <p-accordion #accordionQuestion *ngIf="questionItems && questionItems.length > 0"
                     [activeIndex]="currentIndexAccordion"
                     class="text-left mt-2 w-100"
                     (onOpen)="checkOpenAccordion($event)"
                     [expandIcon]="'fa fa-fw fa-chevron-right'"
                     [collapseIcon]="'fa fa-fw fa-chevron-down'">

          <p-accordionTab #accordionTab *ngFor="let question of questionItems; let i = index;" 
                   class="mb-2" id="accordionTab">
            <p-header class="w-100">
              <span class="w-100" [innerText]="question.code + ' - ' + question.text"></span>
            </p-header>
             <question #question *ngIf="i == currentIndexAccordion"
             (formValuesChanged)="questionChanged($event)"
              </question>
          </p-accordionTab> 

   </p-accordion>

checkOpenAccordion方法在哪里

@ViewChild('question', {static: false}) accordion: Accordion;

checkOpenAccordion(index: number) {
           if (this.currentIndexAccordion != index && this.changed) {
                this.disabledOthersAccordion();
                this.accordionQuestion.activeIndex = this.currentIndexAccordion;
           } else {
               this.currentIndexAccordion = index;
           }
}




  disabledOthersAccordion() {
      if (this.accordion && this.accordion.tabs && 
         this.accordionDomande.tabs.length > 0) {
          for (let i = 0; i < this.accordion.tabs.length; i++) {
            if (i !== this.currentIndexAccordion) {
              this.accordion.tabs[i].disabled = true;
            }
          }
        }
    }


questionChanged(changed) {
  this.changed = changed;
}

Answer 1

为此，您需要在 html 示例中添加一些类似 (input) 的 input 方法

(input)="FirstAccordion($event)"

为此，您可以检查用户是否在输入字段中输入了某些内容，例如

let first = event.target.value;

之后，您需要在每个标题上添加[disabled]="whatEverYouWantName" 属性，例如

<p-accordionTab header="Address Name" [disabled]="address"></p-accordionTab>

如果您想默认首先关闭手风琴，然后在第一个选项卡上添加此 [selected]="false" 属性，例如

<p-accordionTab header="first Name" [selected]="true">

---

完整代码示例

HTML

<p-accordion>
    <p-accordionTab header="first Name" [selected]="true" [disabled]="firstname">
        <form>
            first Name<br/>
            <input type="text" (input)="FirstAccordion($event)"/> &nbsp;
      <button type="button">Save</button>
        </form>
    </p-accordionTab>
    <p-accordionTab header="Last Name" [disabled]="lastname">
        Last Name<br/>
        <input type="text" (input)="SecondAccordion($event)"/>&nbsp;
      <button type="button">Save</button>
    </p-accordionTab>
        <p-accordionTab header="Address Name" [disabled]="address">
            Address Name<br/>
            <input type="text" (input)="ThirdAccordion($event)"/>&nbsp;
      <button type="button">Save</button>
    </p-accordionTab>
</p-accordion>

TS

firstname: boolean = false;
  lastname: boolean = false;
  address: boolean = false;

  FirstAccordion(event) {
    console.log(event.target.value);
    let first = event.target.value;
    if (first) {
      this.lastname = true;
      this.address = true;
    } else if (first == '') {
      this.lastname = false;
      this.address = false;
    }
  }

  SecondAccordion(event) {
    console.log(event.target.value);
    let last = event.target.value;
    if (last) {
      this.firstname = true;
      this.address = true;
    } else if (last == '') {
      this.firstname = false;
      this.address = false;
    }
  }

  ThirdAccordion(event) {
    console.log(event.target.value);
    let address = event.target.value;
    if (address) {
      this.firstname = true;
      this.lastname = true;
    } else if (address == '') {
      this.firstname = false;
      this.lastname = false;
    }
  }

现在你必须根据你的要求做一些逻辑，并且在保存按钮上没有写任何你必须写的逻辑

这是我的 stackblitz Check here or preview here