Javascript 如何在angular 4中使用ngModel从表单中获取值
我在输入框中使用ngModel时出现此错误。Javascript 如何在angular 4中使用ngModel从表单中获取值,javascript,angular,Javascript,Angular,我在输入框中使用ngModel时出现此错误。 在.html页面中 <form> <div *ngIf="editTitle" class="form-group"> <input type="input" class="form-control" name="title" required placeholder="title" [(ngModel)]="video.title"> </div&g
在.html页面中
<form>
<div *ngIf="editTitle" class="form-group">
<input type="input" class="form-control" name="title" required
placeholder="title" [(ngModel)]="video.title">
</div>
<h3 *ngIf="!editTitle" (click)="onTitleClick()">{{video.title}}</h3>
</form>
import { Component, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'video-detail',
templateUrl: './video-detail.component.html',
styleUrls: ['./video-detail.component.css'],
inputs: ['video']
})
export class VideoDetailComponent implements OnInit {
private editTitle: boolean = false;
constructor() { }
ngOnInit() {
}
ngOnChanges(){
this.editTitle = false;
}
onTitleClick(){
this.editTitle = true;
}
}
似乎您以错误的方式获取输入。请尝试以下方式获取输入:
export class VideoDetailComponent implements OnInit {
@Input() video:object;
constructor() {
}
ngOnInit() {
}
}
您还必须从“@angular/core”导入“Input”模块,如下所示:
import { Component, OnInit,Input } from '@angular/core';
app.component.html
<form><div *ngIf="editTitle" class="form-group">
<input type="input" class="form-control" name="title" required
placeholder="title" [(ngModel)]="video.title"></div>
<h3 *ngIf="!editTitle" (click)="onTitleClick()">{{video.title}}</h3>
</form>
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
video: any = {};
private editTitle: boolean = false;
constructor() { }
ngOnInit() { }
ngOnChanges(){
this.editTitle = false;
}
onTitleClick(){
this.editTitle = true;
}
}
实际上你想要什么,伙计?你能不能也给出错误的详细信息?错误:不,这不会很好地工作,我对angular 4没有太多的知识,这是错误图像:编辑我的答案:尝试从angular导入输入模块,如下所示:
import{Component,OnInit,Input}来自“@angular/core”代码>谢谢Ravi Teja。它工作:)这是我的荣幸抱歉,我不能,因为它显示了此错误消息
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
video: any = {};
private editTitle: boolean = false;
constructor() { }
ngOnInit() { }
ngOnChanges(){
this.editTitle = false;
}
onTitleClick(){
this.editTitle = true;
}
}