Вход

Просмотр полной версии : Angular 6 не могу в инпуте читать данные с объекта


AnthonyFink
01.10.2018, 14:28
в общем проблема у меня такая
https://i.stack.imgur.com/CaYkl.png
кто может мне помочь с этим ?
присоеденяю код к топику

компонент формы
import { Component, OnInit } from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { MovieRequestService } from '../../shared/services/movie-request.service';
import { HttpClient} from '@angular/common/http';
import {ActivatedRoute, Router} from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
selector: 'app-edit-movie-modal',
templateUrl: './edit-movie-modal.component.html',
styleUrls: ['./edit-movie-modal.component.css']
})
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).subscri be(response => this.movie = response.data.movie);
}
onDelete () {
if (confirm('Are you sure ???')) {
this.movieService.deleteMovie(this.movie);
this.flashMessage.show('Movie Removed Succes');
}
}
onSave () {}
}


ХТМЛ страницы
<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="title">Movie Title</label>
<input
type="text"
name="title"
id="title"
class="form-control"
[(ngModel)]="movie.title"
>
</div>
<div class="form-group">
<label for="year">Year</label>
<input
type="text"
name="year"
id="year"
class="form-control"
[(ngModel)]="movie.year"

>
</div>
<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>
<div class="form-group">
<label for="description">Description</label>
<textarea
class="form-control"
id="description"
name="description"
[(ngModel)]="movie.description_full"
></textarea>
</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>


помогите плиз очень супер важно найти решение

destus
01.10.2018, 14:32
Что содержится в поле cast объекта movie?

AnthonyFink
01.10.2018, 14:38
Что содержится в поле cast объекта movie?

"cast": [
{
"name": "Bruce Willis",
"character_name": "Det. Jack Mosley",
"url_small_image": "https://yts.am/assets/images/actors/thumb/nm0000246.jpg",
"imdb_code": "0000246"
},
{
"name": "David Morse",
"character_name": "Det. Frank Nugent",
"url_small_image": "https://yts.am/assets/images/actors/thumb/nm0001556.jpg",
"imdb_code": "0001556"
},
{
"name": "Casey Sander",
"character_name": "Capt. Dan Gruber",
"imdb_code": "0761389"
},
{
"name": "Tom Wlaschiha",
"character_name": "Bus Passenger",
"url_small_image": "https://yts.am/assets/images/actors/thumb/nm0937239.jpg",
"imdb_code": "0937239"
}

AnthonyFink
01.10.2018, 14:39
на обычной странице я на каст делаю ngForm и вытаскиваю имя с объекта

destus
01.10.2018, 15:10
Ну вы их можете привести к строке и записать в input, только какой в этом будет смысл? Если я изменю значение в этом input и сделаю save, то на сервер уйдет строка, а не объекты. Ну или перед сохранением делать обратную операцию, т.е. из строки => массив объектов. Вообще, на мой взгляд, здесь нужен multiselect, а не input.

AnthonyFink
01.10.2018, 15:21
Ну вы их можете привести к строке и записать в input, только какой в этом будет смысл? Если я изменю значение в этом input и сделаю save, то на сервер уйдет строка, а не объекты. Ну или перед сохранением делать обратную операцию, т.е. из строки => массив объектов. Вообще, на мой взгляд, здесь нужен multiselect, а не input.

можно плиз это более кодом, я просто только учусь и не все знаю как сделать

destus
01.10.2018, 17:00
Можно завести переменную в компоненте (castText) и при получении данных для формы приводить ее к такому виду

this.movieService.getMovieDetails(this.id).subscri be(response => {this.movie = response.data.movie; this.castText = this.movie.cast.map(cast => cast['character_name']).join();});

Ну и в шаблоне соответственно

<input
type="text"
name="cast"
id="cast"
class="form-control"
[(ngModel)]="castText"
>

AnthonyFink
01.10.2018, 17:52
не работает этот способ говорит дата андифайнд

destus
02.10.2018, 13:51
Ну значит в response у вас что-то не то приходит. К моим добавкам кода это не имеет никакого отношения.

AnthonyFink
02.10.2018, 20:38
да все/ большое спасибо проблема решена