[英]Dates not binding in Angular
I am using Angular 7 for my Web app and have the following code in html:我正在为我的 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>
When calling a Web API I got a JSON object like this:在调用 Web API 时,我得到了一个像这样的 JSON 对象:
{
"id": 11,
"description": "This is a test description",
"budget": 1000,
"myDate": "2020/02/11",
...
}
This is the component code:这是组件代码:
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);
}
}
All the properties are bind properly except myDate property.除 myDate 属性外,所有属性都已正确绑定。
I have doing some research and trying different propose solutions , but none one seems to work so far.我做了一些研究并尝试了不同的建议解决方案,但到目前为止似乎没有一个工作。
Does any one of you face something similar?你们中有人遇到过类似的事情吗?
To make a two way binding, you should first make sure you have imported FormsModule
into your @NgModule
in app.module.ts
.要进行双向绑定,您应该首先确保已将
FormsModule
导入到@NgModule
中的app.module.ts
。
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 {}
Then, in html file use [(ngModel)]
:然后,在 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>
I remove the pipe because using the two way bindind with it gave me error.我移除了管道,因为使用两种方式 bindind 给了我错误。 check that thread for a workout.
检查该线程以进行锻炼。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.