Angular 6表单,将对象提取到输入

时间:2018-10-01 11:23:14

标签: angular

有人可以帮助我将具有data.name的对象提取到输入中吗 这是带有输入的网站表单的图片

enter image description here

这是组件的html代码

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Edit Movie</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form #editMovieForm="ngForm" (ngSubmit)="onSave(editMovieForm)">
      <div class="form-group">
        <label for="runTime">Run Time</label>
        <input
          type="text"
          name="runTime"
          id="runTime"
          class="form-control"
          [(ngModel)]="movie.runtime"
        >
      </div>
      <div class="form-group">
        <label for="genre">Genre</label>
        <input
          type="text"
          name="genre"
          id="genre"
          class="form-control"
          [(ngModel)]="movie.genres"
          value=""
        >
      </div>
      <div class="form-group">
        <label for="cast">Cast</label>
        <input
          type="text"
          name="cast"
          id="cast"
          class="form-control"
          [(ngModel)]="movie.cast"
        >
      </div>
      <input type="submit" class="btn btn-success" value="Save">
      <button
        type="button"
        class="btn btn-danger float-right"
        (click)="onDelete()"
      ><i class="far fa-trash-alt"></i> Remove</button>
    </form>
  </div>
</ng-template>
<button class="btn btn-light mb-2 mr-2" (click)="openBackDropCustomClass(content)">Edit Movie</button>

这是一个组件

export class EditMovieModalComponent implements OnInit {
  closeResult: string;
  movie: any = new Object();
  id: number;
  constructor(
              private modalService: NgbModal,
              private movieService: MovieRequestService,
              private flashMessage: FlashMessagesService,
              private http: HttpClient,
              private router: Router,
              private route: ActivatedRoute
  ) {
    this.getMovieDetails();
  }
  openBackDropCustomClass(content) {
    this.modalService.open(content, {backdropClass: 'light-blue-backdrop'});
  }
  ngOnInit() {
  }
  getMovieDetails () {
    // Get Id from URL
    this.id = this.route.snapshot.params['id'];
    this.movieService.getMovieDetails(this.id).subscribe(response => this.movie = response.data.movie);
  }
  onDelete () {
    if (confirm('Are you sure ???')) {
      this.movieService.deleteMovie(this.movie);
      this.flashMessage.show('Movie Removed Succes');
    }
  }
  onSave () {}
}

我无法获取cast.name的数据,因为它是一个对象 我该怎么办? 以及如何将编辑电影保存到虚拟dom或成角度的东西?

2 个答案:

答案 0 :(得分:0)

这里的“广播”是什么?是字符串吗? (例如)firstName和lastName的组合吗?然后它是一个对象。您需要像这样指定它:movie.cast.firstName

答案 1 :(得分:0)

角度响应将作为Observables出现,您必须给它一个结构以正确读取数据,我认为您尚未为Observable定义任何结构(接口或类),因此在那种情况下,我认为map函数可以解决你的问题。例如:

getMovieDetails() {
return this.http.get('your URL')
    .map(res => res);
}

我希望这可以解决您的问题,如果不能解决,请在进行后端调用的位置发布代码。

您可以参考以下链接来了解Angular HTTP调用和Observables:

Angular HTTP