У меня есть эта ошибка, когда я использую ngModel в вводах. In.html page
<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>
Это файл details.components.html, а последний - файл details.components.ts.
In.ts page
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;
}
}
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.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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;
}
}
Кажется, вы неправильно вводите ввод данных. Попробуйте ввести такой ввод:
export class VideoDetailComponent implements OnInit {
@Input() video:object;
constructor() {
}
ngOnInit() {
}
}
Вам также необходимо импортировать модуль "Input" из "@angular/core", как показано ниже:
import { Component, OnInit,Input } from '@angular/core';
import { Component, OnInit,Input } from '@angular/core';