Angular 4.3以模型

时间:2017-08-13 10:09:08

标签: html angular

enter image description here

以上是我在运行代码时在Developer Tool的控制台部分找到的错误消息。奇怪的是,页面工作正常,但错误消息仍然弹出。我尝试了很多方法来确定问题,但仍然没有运气。请提供一些解决此问题的建议,谢谢。显示错误的HTML代码如下:

<!doctype html>
<html>
<body>
    <div class="container">
        <h1>Movie</h1>
        <form (ngSubmit)="onSubmit()" #movieForm="ngForm">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" class="form-control" id="title" required [(ngModel)]="model.title" name="title">
            </div>

            <button type="submit" class="btn btn-success" [disabled]="!movieForm.form.valid" >Save</button>
        </form>
    </div>
</body>
</html>

Angular组件脚本如下:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OnInit } from '@angular/core';
import { Movie } from './movie';

@Component({
    selector: 'movie-form',
    templateUrl: './movie-form.component.html'
})

export class MovieFormComponent implements OnInit{
    model: Movie;

    constructor(private http: HttpClient) {

    }

    ngOnInit(): void {
        this.http.get('http://localhost:3000/api/movie').subscribe(data => {
            this.model = new Movie( data['title']);
        });
    }

    submitted = false;

    onSubmit(){
        this.submitted = true;
        this.http.post('http://localhost:3000/api/movie', {
                "title": this.model.title
            }).subscribe(data => {
        });
    }
}

1 个答案:

答案 0 :(得分:0)

将您的声明更改为

model = new Movie();