时间戳

首页 > 解决方案 > 无法分配给“fromDate”，因为它是只读属性。ts

html - 无法分配给“fromDate”，因为它是只读属性。ts

问题描述

我正在使用角度 12。我有 2 个DatePicker，它们在表单内。每个 DatePicker 都有小 X 按钮。我希望当我按下它时，它会清除 DatePicker 中的输入。但是当我尝试以这种方式清除它时：this.fromDate=null出现此错误：无法分配给'fromDate'，因为它是只读属性。ts . 我尝试了函数 this.fromDate.setValue() 但它说该函数不存在。我发现的任何其他提及此错误的内容都暗示了我之前提到的内容或我无法做的事情，因为这是形式上的。
还尝试了 this.filterForm.reset()但它重置了两个 Datepicker，因为它们在组中。

这是我的代码：

这是我的 html 代码

<div class="title-group" >
   <h1 class="mat-h1" >Popis vožnji</h1>
 </div>

 <div >
   <mat-divider fxFlex="1 0"></mat-divider>

 </div >
 <div>
 <mat-form-field appearance="standard">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Lift0" #input>
 </mat-form-field>
 </div>
 <div  >
 <form [formGroup]="filterForm">
     <mat-form-field class="example-form-field1">
       <input matInput  


         [matDatepicker]="fromDate" 
         placeholder="From Date" 
         formControlName="fromDate">
         <button *ngIf="fromDate" matSuffix mat-icon-button aria-label="Clear" (click)="clearFromDate()">
           <mat-icon matDatepickerToggleIcon >close</mat-icon>
         </button>
       <mat-datepicker-toggle matSuffix [for]="fromDate"></mat-datepicker-toggle>
       <mat-datepicker #fromDate></mat-datepicker>
     </mat-form-field>
    
     <mat-form-field class="example-form-field1">
       <input matInput  
      
         [matDatepicker]="toDate" 
         placeholder="To Date" 
         formControlName="toDate">
         <button *ngIf="toDate" matSuffix mat-icon-button aria-label="Clear" (click)="clearToDate($event)">
           <mat-icon matDatepickerToggleIcon >close</mat-icon>
         </button>
       <mat-datepicker-toggle matSuffix [for]="toDate"></mat-datepicker-toggle>
       <mat-datepicker #toDate></mat-datepicker>

     </mat-form-field>
    <button mat-button color="primary" (click)="applyFilterDate()">Pretraži</button>
 </form>
 </div>
</div>

这是我的 ts 代码

export class IspisPutovanjaComponent implements OnInit {
 
 id :string|null;
 LiftData: any = [];
 dataSource!: MatTableDataSource<Putovanje>;
 @ViewChild(MatPaginator)
 paginator!: MatPaginator;

 @ViewChild(MatSort)
 sort!: MatSort;
 displayedColumns: any[] = [
   'n_k',
   'v_k',
   'p_k',
   'z_k',
   'start_time',
   'end_time',
   'count_p'
 ];
 //
 pipe: DatePipe;

 filterForm = new FormGroup({
   fromDate: new FormControl(),
   toDate: new FormControl(),
});



 get fromDate() { return this.filterForm.get('fromDate')!.value; }
  get toDate() { return this.filterForm.get('toDate')!.value; }
 constructor(private travel_service: PutovanjeService,private actRoute: ActivatedRoute) {
   this.id = this.actRoute.snapshot.paramMap.get('id');
   this.dataSource= new MatTableDataSource();
   this.pipe = new DatePipe('en');
  

  }
 ngOnInit(): void {
   this.LiftData = [];

   this.retrieveLifts();
 }


 applyFilter(event: Event) {
   const filterValue = (event.target as HTMLInputElement).value;
   this.dataSource.filter = filterValue.trim().toLowerCase();
   if (this.dataSource.paginator) {
     this.dataSource.paginator.firstPage();
   }
 }

 //

applyFilterDate() {

 this.dataSource.data=this.LiftData.filter( (data: { start_time: string | number | Date; end_time: string | number | Date; })=>{

   if (this.fromDate && this.toDate) {
     return this.pipe.transform(data.start_time,'shortDate')! >= this.pipe.transform(this.fromDate,'shortDate')! && this.pipe.transform(data.end_time,'shortDate')! <=  this.pipe.transform(this.toDate,'shortDate')!;
     }
 return true;
  }
 );

}
clearFromDate() 
{
 this.fromDate=null;

}
clearToDate(event: { stopPropagation: () => void; }){
 event.stopPropagation();
 this.dataSource.data=this.LiftData;
 

}

}

标签： htmlangulartypescriptformsdatepicker

解决方案

你有一个模板引用变量：“#fromDate”在你的

<mat-datepicker #fromDate ..>

与你同名

get fromDate(){..}

只需将第一个从一些更改为 <mat-datepicker #fromDateID ..>

看到，在这种情况下，工具按钮变成了<mat-datepicker-toggle [for]="fromDateID">...

推荐阅读