Question

我正在构建离子型应用程序（v-4），无法显示date中的api。我的JSON看起来像这样：

{
user_name: "Jhon"
status: "Open"
meeting_date: "31-08-2019"
remark: "No remarks"
request_id: 958
}

我试图在date中显示<ion-datetime>，如下所示：

HTML

  <form [formGroup]="editForm">
     <ion-item>
            <ion-label position="stacked">Date</ion-label>
            <ion-datetime formControlName="meeting_date" [(ngModel)]="resObj.meetingDate"></ion-datetime>
      </ion-item>
 </form>

TS

public resObj;
ngOnInit() {
    this.resObj = this.navParams.data.paramRequest;
    this.updateForm = this.fb.group({
      remark : [null],
      .
      .
      meeting_date: [null],
    });
  }

我收到此错误：解析日期错误：“未定义”。请提供有效的ISO 8601日期时间格式：https://www.w3.org/TR/NOTE-datetime

所以我尝试了此解决方案===> ionic 2 ion-datetime ISO Format issue

i，e使用ISO格式，然后在模板中显示date，如下所示：

HTML

  <form [formGroup]="editForm">
     <ion-item>
            <ion-label position="stacked">Date</ion-label>
            <ion-datetime formControlName="meeting_date" [(ngModel)]="meetingDate "></ion-datetime>
      </ion-item>
 </form>

TS

public resObj;
ngOnInit() {
    this.resObj = this.navParams.data.paramRequest;
    const meetingDate =  this.resObj.meeting_date.toISOString(); <======
    this.updateForm = this.fb.group({
      remark : [null],
      .
      .
      meeting_date: [null],
    });
  }

仍然我无法在date中显示ion-datetime

我找不到问题所在。

Answer 1

我建议使用moment，然后您甚至可以创建一个描述为here的管道。您可以这样使用它：

<span >{{ resObj.meetingDate | momentPipe: 'dddd D MMM YYYY' }}</span>

其他格式here。

更新：创建表格

public someForm: FormGroup;
  ngOnInit() {
    this.initSomeForm();
  }
  initSomeForm() {
    this.someForm = new FormGroup({
      userName: new FormControl(this.resObj.user_name, [Validators.required]),
      meetingDate: new FormControl(this.resObj.meeting_date, [Validators.required]),
      status: new FormControl(this.resObj.status, [Validators.required]),
      remark: new FormControl(this.resObj.remark),
      requestId: new FormControl(this.resObj.request_id),
    });
  }

以html

  <form [formGroup]="someForm">
<ion-item>
       <ion-label position="stacked">Date</ion-label>
       <ion-datetime formControlName="meetingDate" displayFormat="MM DD YY"></ion-datetime>
 </ion-item>

无法在<ion-datetime>组件中显示日期

1 个答案: