“自动”创建列表(HTML代码改进)

时间:2019-04-24 13:46:15

标签: html5 angular6

我正在一个有角度的框架中创建一个Web应用程序,该应用程序应该控制一些执行器。 这些应显示在列表中,该列表将以可变长度自动生成。

对于列表,我使用的是角材料制成的扩展面板,因此列表始终清晰显示在智能手机上。 每个面板都应包含一些声明和滑动开关,以控制执行器。

<mat-accordion>

<mat-expansion-panel>

      <mat-expansion-panel-header>
        <mat-panel-title>
          P&ID: {{ nameV[1] }}
        </mat-panel-title>
        <mat-panel-description class='paneldescription'>
          <i class="material-icons valve-status" [class.open]="statusV[1]" [class.closed]="!statusV[1]">
            {{(statusV[1]) ? "arrow_upwards" : "arrow_downward"}}</i>
          <mat-checkbox class="ControlBox-margin" [(ngModel)]="controlBoxChecked[1]" [labelPosition]="controlBoxLabelPosition"
            [disabled]="controlBoxDisabled">
            Checked.
          </mat-checkbox>
        </mat-panel-description>
      </mat-expansion-panel-header>
      <mat-divider></mat-divider>

      <!-- Slide Toggle AUTO/ MANUAL -->
      <mat-slide-toggle class="slide-margin" [color]="slideColor" [checked]="modeSlideChecked[1]" [disabled]="modeSlideDisabled[1]"
        (change)="modeOnChange($event,1)" [(ngModel)]="switch[3]">
        Auto/ Manual
      </mat-slide-toggle>
      <mat-divider></mat-divider>

      <!-- Slide Toggle -> OPEN/ CLOSE -->
      <mat-slide-toggle class="slide-margin" [color]="slideColor" [checked]="statusV[1]" [disabled]="slideDisabled[1]"
        (change)="onChange($event,1)" [(ngModel)]="switch[4]">
        Close/ Open
      </mat-slide-toggle>
      <mat-divider></mat-divider>
      <p class="details">V001 </p>

</mat-expansion-panel>

<!-- next panel -->

<mat-accordion>

在执行器之间(每个面板中)变化的唯一事物是每个数组或功能参数中的数字1。

是否可以使用此可变数组编号自动创建扩展面板?

0 个答案:

没有答案