Question

我在Angular 8中有一个应用程序和一个搜索表单。因此，用户可以选择带有日期选择器的日期。然后api调用将搜索该日期。

但现在我会收到此错误：

ExtendedSearchComponent.html:41 ERROR TypeError: Cannot read property 'toString' of undefined

thml看起来像这样：

  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate.date" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate.date" ngDefaultControl (selectedChanged)="onDate($event)"></mat-datepicker>
      </mat-form-field>
    </div>

按钮：

 <div fxFlex="none">
        <div fxLayout="row">
          <div class="is-grouped">
            <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Zoek</button>&nbsp;
            <button mat-raised-button color="secondary" class="Button">Clear</button>
          </div>

      </div>
    </div>

和ts代码如下：


startDate: Date;
 // endDate: Date;

  constructor( private participantService: ParticipantService) {}

  ngOnInit() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.searchExtended) {
      this.searchExpanded = changes.searchExtended.currentValue;
    }
  }

/*   public onDate(event): void {
    this.startDate.date = event;
    this.getData(this.roomsFilter.date);
  } */

  searchFor( filterRegistration : FilterByRegistrationDTO) {

   console.log(this.participantService.filterParticipantsByRegistration(1, "Invited", this.startDate.toString()).subscribe(result => {
  //  this.startDate = filterRegistration.start.value;
   console.log(result);
   console.log(this.startDate);


   }));


  }

谢谢

如果我这样做：


  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate" ngDefaultControl (selectedChanged)="onDateChanged()"></mat-datepicker>
      </mat-form-field>
    </div>

我收到此错误：

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js._AstToIrVisitor.visitPropertyWrite (compiler.js:6440)

Answer 1

您尚未将startDate分配给任何值，您肯定会遇到另一个错误，即无法读取未定义的“日期”。同样也不需要，您可以将'startDate'变量直接绑定到ngModel。

将[(ngModel)]="startDate.date"替换为[(ngModel)]="startDate"

我在这里创建了一个叉子-https://stackblitz.com/edit/angular-5r6u3p

component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [(ngModel)]="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

 <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Search</button>

component.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Datepicker selected value */
@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  startDate: Date;

  searchFor() {
   console.log(this.startDate.toString());
   };
}

如何从日期选择器中读取日期

1 个答案: