PrimeNG перестал открывать аккордеон - PullRequest
Новая
       15

PrimeNG перестал открывать аккордеон

0 голосов
/ 22 апреля 2020

Как я могу заставить не открывать гармошку в PrimeNG. Я имею в виду, что в некоторых обстоятельствах я не хочу, чтобы выбранный мной аккордеон открылся. Я пытался таким образом, но это не работает

https://www.primefaces.org/primeng/showcase/# / аккордеон 

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

1 Ответ

0 голосов
/ 22 апреля 2020

Для этого вам нужно добавить какой-нибудь input метод, подобный этому (input) на html пример 

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

теперь вперед, вы должны сделать некоторые логи c согласно вашему требованию, и на кнопке сохранения не написано никаких логов c вы должны написать на нем

вот мой стек Проверьте здесь или просмотрите здесь

...