点击添加按钮不显示数据

Question

在我输入数据并点击添加按钮后，它在列表中显示空白数据而不是在列表中显示数据。有一个错误说：预期 0 个参数但得到 3 个。我创建了一个 const newMovie 以便它可以传递输入值并将其添加到 .addMovie(newMovie)。它虽然在控制台中显示数据，但不在浏览器中显示数据。有什么帮助吗？谢谢。

      onSubmit(formData: NgForm) {
                console.log(formData);
                  const value = formData.value;
                // having problem in here,  it says expected 0 argument but got 3
                 const newMovie = new Movies(value.title, value.actors, value.releasedDate);
                 this.moviesService.addMovie(newMovie);
                }

            //moviesService
             movies: Movies[] = [
                  {
                        title: 'Mr & Mrs Smith',
                        actors: ['Brad Pitt',  ' Angelina Jolie'],
                        releasedDate: '2010-03-18'
                    },
                    {
                        title: 'Titanic',
                        actors: ['Leonardo deCaprio', ' Cate Winslet'],
                        releasedDate: '2008-03-20'
                    }
                ];


                moviesChanged = new BehaviorSubject<Movies[]>(this.movies);

                getMovies(): Movies[] {
                    return this.movies.slice();
                }

                addMovie(movie: Movies) {
                    this.movies.push(movie);
                    this.moviesChanged.next(this.movies.slice());
                }
            }

      // movie-list.component
        export class MovieListsComponent implements OnInit {
        movies: Movies[];

        constructor(private moviesService: MoviesService) { }

          ngOnInit() {
             this.movies = this.moviesService.getMovies();
            this.moviesService.moviesChanged.subscribe(
              (movies: Movies[]) => {
            this.movies = movies;
              }
            );
          }




            movies.component.html
             <h3 [ngClass] = "{textColor: changeColor}">{{message}}</h3>
              <div class="row">
                <div class="col-xs-12">
                  <form (ngSubmit)="onSubmit(f)" #f= "ngForm">
                    <div class="row">
                        <div class="col-xs-12">
                    <div class="form-group">
                      <label for="title">Title</label>
                      <input type="text" class="form-control" id="title"
                      ngModel
                      name="title">
                    </div>
                        </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12">
                      <div class="form-group" >
                        <label for="actors">Actors</label>
                        <input type="text" class="form-control" id="actors"
                        ngModel
                        name="actors">
                      </div>
                    </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                        <div class="form-group">
                          <label for="releasedDate">Released Date</label>
                          <input type="text" class="form-control" id="releasedDate"
                          ngModel
                          name="releasedDate">
                        </div>
                        </div>
                      </div>
                      <button class= "btn btn-primary" type="submit">Add</button>
                  </form>


                </div>
              </div>

    // movie-lists.component 
<div class="container">
  <div class="col-xs-12">    
      <div class="row">
          <div class="col-xs-6">           
              <app-movies  message = "Add your favourite movie: " ></app-movies >
          </div>
        </div> 
        <div class="row">
            <div class="col-xs-6"  >
              <ul  class="list-group"  *ngFor= "let movie of moviesService.moviesChanged | async" >
                <div>
                   <h3> Title: {{movie.title}}</h3> 
                </div>
                <li class="list-group-item"  >
                   <strong>Actors: </strong> {{ movie.actors }}
                   </li>
                   <li class="list-group-item" >
                      <strong>Released Date: </strong> {{movie.releasedDate}}
                     </li>
              </ul>
            </div>
          </div>         
  </div>
</div>

Answer 1

欢迎使用 Whosebug！

这行代码：

const newMovie = new Movies(value.title, value.actors, value.releasedDate);

正在调用电影中的参数化构造函数class，传入三个值。

你的电影 class 是什么样子的？它是否具有带 3 个参数的参数化构造函数？错误消息提示您不要这样做。

尝试改用这个：

const newMovie = new Movies();
newMovie.title = value.title;
newMovie.actors = value.actors;
newMovie.releaseDate = value.releaseDate;

它正在构建带有无参数的电影，然后单独设置属性。

点击添加按钮不显示数据

Click add button does not show the data

angular

angular7

angularjs-ng-form