Question

在Angular 6应用程序中，我想单击按钮添加多个NG-QUILL编辑器。

 <mat-accordion *ngFor="let sectiondata of ViewDalContent?.sections; index as i">
    <mat-expansion-panel class="viewdal" id="{{sectiondata?.id}" multi="false">
      <mat-expansion-panel-header class="mat-primary">`enter code here`
        <mat-panel-title>{{sectiondata?.title}}</mat-panel-title>
      </mat-expansion-panel-header>
      <div *ngIf="data?.description!== null" class="clause-action-btn-holder">
        <span><button class="ct-dark-blue btn" (click)="showEditClauseEditor($event,i)">Add</button></span>
      </div>
      <div *ngIf="isEditEditClauseEditor">
        <quill-editor placeholder="Enter Text"
                      [modules]="quillConfig"
                      (onSelectionChanged)="onSelectionChanged($event)"
                      (onContentChanged)="onContentChanged($event)"></quill-editor>
      </div>
      <ng-template matExpansionPanelContent>
        <!--<button class="search-clause-btn btn ct-dark-blue" (click)="showClauseSearchPanel(sectiondata.id)">Search Clause</button>-->
        <div *ngFor="let data of ViewDalContent?.items ">
          <div *ngIf='data?.sectionView?.id === sectiondata?.id'>
            <div id="clause" *ngIf='data?.subType.toLowerCase()==="clause"' [ngClass]="{'remove-clause': (data.partitionKey === '')}">
              {{data.title}}
              <div *ngIf="data?.description!==null">
                <div [innerHTML]="data?.description"></div>
              </div>
            </div>
          </div>
        </div>
      </ng-template>
      <br />
    </mat-expansion-panel>
    <br/>
  </mat-accordion>

在上面的代码am中，首先循环遍历各个部分，然后在每个部分中都有一个Add按钮。单击添加按钮后，需要启动“羽毛笔编辑器”。此处面临2个挑战。

如果我单击“添加”按钮，则将在所有部分中添加“编辑器”，因为仅在我单击“添加”按钮的那部分中需要添加编辑器。
我需要在同一部分中添加多个编辑器。即我应该可以在同一部分中多次单击“添加”。

对此将有任何帮助。

Answer 1

问题在于所有编辑器的显示/隐藏都取决于单个变量isEditEditClauseEditor。如果设置为true，则显示所有编辑器，反之亦然。

您可以创建一个数组来跟踪每个编辑器。

Here使您大开眼界。

单击添加按钮添加多个NG-QUILL编辑器

1 个答案: