Нажмите кнопку Добавить не показывает данные

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

Добро пожаловать в stackru!

Эта строка кода:

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

Вызывает параметризованный конструктор в классе Movie, передавая три значения.

Как выглядит ваш класс Movies? Есть ли у него параметризованный конструктор с 3 параметрами? Сообщение об ошибке предполагает, что вы этого не делаете.

Попробуйте вместо этого использовать это:

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

Это создание фильма без параметров, а затем индивидуальная настройка свойств.