Javascript 用按钮打开物料日期选择器

我想打开带有fa图标的材质日历。所以我是这样的：

  <div class="form-group row">
                <label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>
                <input [(ngModel)]="start" [ngModelOptions]="{standalone: true}"
                 type="text" class="date" id="start" value="start">                
                <span class="ml-2" (click)= "reOpenCalender()">
                    <fa-icon [icon]="faCalendarAlt" size="1x"  #picker [styles]="{'color': '#B7B7B7'}"
                      ></fa-icon>
                </span>
            </div>

reOpenCalender() {
    let self = this;
    setTimeout(() => {
      self.picker.open();
    }, 50);
  }

  <span class="ml-2" (click)= "reOpenCalender()">
   <fa-icon [icon]="faCalendarAlt" size="1x"></fa-icon>
  </span>
  <mat-datepicker #picker></mat-datepicker>

但我得到了这个错误：

core.js:4442 ERROR TypeError: self.picker.open is not a function
    at widget-editor.component.ts:65

如果我点击图标

那么我要改变什么呢

谢谢

您将

#选取器

添加到图标，图标没有打开方法。 单击图标后，您需要调用datepicker本身的open方法。 你应该有这样的东西：

  <div class="form-group row">
                <label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>
                <input [(ngModel)]="start" [ngModelOptions]="{standalone: true}"
                 type="text" class="date" id="start" value="start">                
                <span class="ml-2" (click)= "reOpenCalender()">
                    <fa-icon [icon]="faCalendarAlt" size="1x"  #picker [styles]="{'color': '#B7B7B7'}"
                      ></fa-icon>
                </span>
            </div>

reOpenCalender() {
    let self = this;
    setTimeout(() => {
      self.picker.open();
    }, 50);
  }

  <span class="ml-2" (click)= "reOpenCalender()">
   <fa-icon [icon]="faCalendarAlt" size="1x"></fa-icon>
  </span>
  <mat-datepicker #picker></mat-datepicker>

请查看以了解更多信息