在 Angular 中不具有约束力的日期

Question

我正在为我的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 属性外，所有属性都已正确绑定。

我做了一些研究并尝试了不同的解决方案，但到目前为止似乎没有人有效。

你们中有人面临类似的事情吗？

Answer 1

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

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>

我

移除了管道，因为使用双向绑定给了我错误。 检查该线程的锻炼。