时间戳

首页 > 解决方案 > Angular dimamic elementRef 名称（不知道它是如何命名的）

angular - Angular dimamic elementRef 名称（不知道它是如何命名的）

问题描述

我有很多代码如下：

<mat-form-field>
  <mat-label>Some label</mat-label>
  <mat-date-range-input [rangePicker]="pickerPay">
    <input matStartDate [(ngModel)]="service.filters.startFrom" placeholder="from" (focus)="pickerPay.open()">
    <input matEndDate [(ngModel)]="service.filters.startTo" placeholder="to" (focus)="pickerPay.open()">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="pickerPay"></mat-datepicker-toggle>
  <mat-date-range-picker #pickerPay></mat-date-range-picker>
</mat-form-field>

#pickerPay从底部倒数第二行

我能以某种方式用变量中的“id”（elementRef 或它的命名方式）制作这段代码吗

这会帮助我

标签： angular

解决方案

mat-date-range 需要一个模板引用变量，它是一个 ,mat-date-range-picker （在您的情况下#pickerPay）。你不需要id (*)

在 a*ngFor中，您可以使用相同的“模板引用变量”，否则您应该拥有与 mat-date-range 一样多的不同模板变量

(*) 顺便说一句，你总是可以使用[id]="variable"，但如果你在 Angular id 中使用，你可能会错误地使用 Angular

更新以创建 *ngFor，您需要创建一个对象数组。有很多解决方案，例如假设您有一个数组 filterData。在一个查询中可以是，例如

filterData=[
  {label:"Create",startField:"startFrom",endField:"startTo"},
  {label:"Update",startField:"updateFrom",endField:"uptateTo"},
  {label:"Delete",startField:"deleteFrom",endField:"deleteTo"}
]

你可以使用一些像

    <!-- a *ngFor over filterData-->
    <mat-form-field *ngFor="let data of filterData">
    
      <!--see the use of data.label-->
      <mat-label>{{data.label}}</mat-label>
    
      <mat-date-range-input [rangePicker]="pickerPay">
        <--see the [(ngModel)]-->
        <input matStartDate [(ngModel)]="service.filters[data.startField]" placeholder="from" (focus)="pickerPay.open()">
        <input matEndDate [(ngModel)]="service.filters[data.endField]" placeholder="to" (focus)="pickerPay.open()">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]="pickerPay"></mat-datepicker-toggle>
      <mat-date-range-picker #pickerPay></mat-date-range-picker>
    </mat-form-field>

请记住，如果我们重复代码，我们可以使用对象数组重新考虑问题

好吧，另一种选择是更改过滤器的属性并使用数组或类似的，真的我对你的问题了解不多

推荐阅读