日期在 Angular 中没有约束力答案

【问题标题】：Dates not binding in Angular日期在 Angular 中没有约束力
【发布时间】：2019-07-18 21:17:25
【问题描述】：

我正在为我的 Web 应用程序使用 Angular 7，并且在 html 中有以下代码：

<div class="form-group col-md-6">
    <label for="myDate">My Date</label>
    <div class="input-group">
        <input 
            class="form-control" 
            placeholder="yyyy/mm/dd" 
            id="myDate" 
            name="myDate"
            [ngModel]="project.myDate | date: 'yyyy/MM/dd'" 
            ngbDatepicker #d="ngbDatepicker" 
            tabindex="9">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        </div>
    </div>
</div>

当调用 Web API 时，我得到了一个这样的 JSON 对象：

{
    "id": 11,
    "description": "This is a test description",
    "budget": 1000,
    "myDate": "2020/02/11",
    ...
}

这是组件代码：

export class ProjectEditComponent implements OnInit {

    project: Project;
    errorMessage: string;


    constructor(private myprojectService: ProjectService) { }

    ngOnInit() {

        this.myprojectService.getDataById(this.dataId).subscribe(
            data => (this.project = data, console.log(JSON.stringify(data))),
            error => this.errorMessage = error as any,
        );

        console.log(this.errorMessage);
    }
}

除 myDate 属性外，所有属性均已正确绑定。

我已经做了一些研究并尝试了不同的建议解决方案，但到目前为止似乎没有一个可行。

你们中有人遇到过类似的事情吗？

【问题讨论】：

你应该显示你的组件代码。或者您是如何将 JSON 对象实现或集成到您的组件中的。
也可以试试[(ngModel)] 而不是[ngModel]
是否要绑定“myDate”：“2020/02/11”，使用双向数据绑定并显示在 UI 上？？
注意这个id="myDate"是绑定字符串"myDate"，id="{{myDate}}"绑定的是myDate值
@user3502626 已更新。使用 [(ngModel)] 会引发错误：动作表达式中不能有管道。

标签： angular angular-forms angular-date-format angular-bootstrap-calendar

【解决方案1】：

要进行双向绑定，首先应确保已将 FormsModule 导入到 @NgModule 中的 app.module.ts。

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

//import this.
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], //register it
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后，在 html 文件中使用[(ngModel)]:

<div class="form-group col-md-6">
    <label for="myDate">My Date</label>
    <div class="input-group">
        <input 
            class="form-control" 
            placeholder="yyyy/mm/dd" 
            id="myDate" 
            name="myDate"
            [(ngModel)]="project.myDate" 
            ngbDatepicker #d="ngbDatepicker" 
            tabindex="9">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        </div>
    </div>
</div>

我删除了管道，因为使用双向绑定给了我错误。检查thread 进行锻炼。

【讨论】：