角度解析器错误:在[form.loading_date | date：'dd/MM/yyyy'=$event]的第21列的操作表达式中不能有管道

Question

我使用Angular-7作为门户网站应用程序。我有一个材料日期拾取器，我只想从它获得没有时间戳的日期。此外，它还应采用以下格式: dd/mm/yyyy。

my.component.ts

import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../shared/services/api.service';
import { TokenService } from '../../shared/services/token.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import swal from 'sweetalert2';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'app-client-quotes-landing',
  templateUrl: './client-quotes-landing.component.html',
  styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {

  public form = {
    first_name : null,
    last_name : null,
    email : null,
    phone : null,
    address : null,
    business_name : null,
    truck_required : null,
    truck_type : null,
    quote_origin : null,
    quote_destination : null,
    commodity : null,
    loading_date : null,
    comment : null,
  };

  public error = {
    'first_name' : null,
    'last_name' : null,
    'email' : null,
    'phone' : null,
    'address' : null,
    'business_name' : null,
    'truck_required' : null,
    'truck_type' : null,
    'quote_origin' : null,
    'quote_destination' : null,
    'commodity' : null,
    'loading_date' : null,
    'comment' : null
  };

  constructor(
    private api: ApiService,
    private token: TokenService,
    private router: Router,
    private notify: SnotifyService,
    ) {
     }     

  ngOnInit() {
    window.dispatchEvent(new Event('load'));
    window.dispatchEvent(new Event('resize'));
  }

  onSubmit(){
    this.notify.clear();
    var header = {
      'Content-Type': 'application/json'
    }
    return this.api.post('clientquotelanding', this.form, header).subscribe(
      error => this.errorHandle(error),
    );
  }

  tokenHandler(data){
    this.notify.clear();
    console.log(data);
  }

  errorHandle(error){
    this.notify.clear();
    console.log(error);
    this.error = error.error.errors;
  }

}

my.component.html

<div class="col-xs-6">
  <label for="loading_date">Loading Date<span style="color:red;"> *</span></label>
  <div class="input-group date" style="width: 100%;" >
   <mat-form-field>
     <input matInput [matDatepicker] = "picker" placeholder = "Choose a date" name="loading_date" [(ngModel)]="form.loading_date | date: 'dd/MM/yyyy'" #loading_date="ngModel" [ngClass]="{'is-invalid' : loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)}"   required>
     <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <div class="form-feedback" *ngIf="loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)">
      <div style="color:red;" *ngIf="loading_date.errors?.required"class="alert alert-danger">Loading Date is required.</div>
      </div>
  </div>
</div>

在my.component.html中，我尝试使用内置管道来解决日期问题。

当我为应用程序提供服务时，我在控制台上收到以下错误：

​

​

我该如何解决它？

Answer 1

管道仅用于显示逻辑，因此不能在ngModel等情况下使用。在TypeScript文件中执行逻辑以返回所需的格式。

Answer 2

请使用ngModel="form.loading_date | date：'dd/MM/yyyy'“(ngModelChange)=”form.loading_date= $event“

而不是像下面这样的双向绑定(ngModel)="form.loading_date | date：'dd/MM/yyyy'“