Question

我正在尝试在mat-expansion-panel内部动态设置内容。我有一个mat-accordion，其中包含扩展面板列表。这是我的代码：

<mat-accordion multi="true" *ngFor="let item of list">

    <mat-expansion-panel class="mb-3" (opened)="openPanel($event, item)">
        <mat-expansion-panel-header *ngIf="item">
            <mat-panel-title class="name" *ngIf="item.firstName ">
                <strong>{{item.firstName | textFormatter:{startIndex: 0, length: 7, noOfDots: 3, capitalize: true} }}</strong>
            </mat-panel-title>

        </mat-expansion-panel-header>

        <mat-action-row class="pl-0 pr-0">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-8 col-lg-7" #htmlcontent>
                    </div>

                </div>
            </div>
        </mat-action-row>
    </mat-expansion-panel>
</mat-accordion>

在面板扩展上，我正在调用openPanel方法。在此方法中，我想执行以下操作：

this.htmlcontent.nativeElement.innerHTML = this.item.htmlContent

其中htmlcontent是ViewChild，如下所示：

@ViewChild("htmlcontent") htmlcontent: ElementRef;

现在的问题是，我没有单个扩展面板，但有一个列表。因此，我不能设置相同的元素htmlcontent。如何设置值，以便每个扩展面板根据相应的项目获得不同的值。

Answer 1

尝试这样设置：

<div class="col-xl-8 col-lg-7" [innerHTML]="item.htmlContent"></div>

打开时不应该尝试对其进行设置，应该始终对其进行设置。

Documentation

在Angular的扩展面板中动态设置内容

1 个答案: