Question

我正在{{ node.field_date_start.value|date("g:ia") }}应用程序中设置一个动态扩展面板，默认情况下，我在Angular 7中显示一个mat-expansion-panel。现在，我有一个添加按钮，我希望如果用户单击此按钮，则新的mat-accordion应该以小写形式或4 {{1} }。

我在mat-expansion-panel类中尝试了此方法，但是它不适用于我。我可能会缺少一些东西。

mat-accordion

我期望将form inputs与动态rendered2相加的结果，而<mat-accordion id="quoteAccordion"> <mat-expansion-panel> <mat-expansion-panel-header> <mat-panel-title>  Panel Title Here  </mat-panel-title> <mat-panel-description> Panel description here </mat-panel-description> </mat-expansion-panel-header>  <div formArrayName="services" *ngFor="let service of services.controls; let i = index"> <mat-form-field appearance="outline" fxFlex="30" class="pr-4"> <mat-label> Description</mat-label> <input matInput formControlName="title" required> <mat-error>Description is required!</mat-error> </mat-form-field> </div  </mat-expansion-panel>  </mat-accordion>  </div> <button class="w-100" matTooltip="Add" type="button" mat-raised-button (click)="addAccordion()"> <mat-icon>add</mat-icon> ADD </button>包含mat-expansion-panel。

谢谢！

Answer 1

我认为这是处理这种情况的好方法。

每当要对User的任何操作（例如单击）创建一组新的输入控件时，请执行以下操作：-

在Array中创建类型为component.ts的变量，并将空对象推入Array，因为您想显示默认控件。
现在使用component.html在*ngFor文件中循环访问此变量。
每当用户单击“添加”按钮时，只需使用Array将一个空对象推入Array.push(object)，由于您已经遍历Array，因此angular将自动添加新控件。

让我知道它是否可行

Answer 2

尝试一下：

Component.html

<button  type="button" mat-raised-button color="primary" (click)="addItem()">
       <mat-icon>add</mat-icon> ADD
</button>

<mat-accordion>
  <mat-expansion-panel *ngFor="let item of items">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{item.title}}
      </mat-panel-title>
      <mat-panel-description>
        {{item.description}}
      </mat-panel-description>
    </mat-expansion-panel-header>

    <div>details or form here</div>

  </mat-expansion-panel>

</mat-accordion>

Component.ts：

export interface myModel{
    title?:string;
    description?:string;
    ...
}


items:Array<myModel>=[{title:"default item title" , description:"default item description"}];

addItem(){
   // push object that you need to be added into array
   this.items.push({title:"new title of item"});
}

如何在单击按钮时动态添加角材扩展面板？

2 个答案: