Угловые 2 * ngFor и отправка формы перестала работать, когда переехал в наблюдаемые

я имел приложение инициирующее компоненту курса, как это:Угловые 2 * ngFor и отправка формы перестала работать, когда переехал в наблюдаемые

<li *ngFor="let course of courses"> 
     <app-course [appCourse]="course" 
     (remove)="removeItem($event)" 
     ></app-course> 
</li>

из массива извлекается из локального хранилища, который заполняется из формы, конечно, отправка a object like this:

{ 
    "_id": "587f52ad266c32fbfb10f21a", 
    "end": "31/1/2017", 
    "start": "1/1/2017", 
    "desc": "see title", 
    "name": "Intro To Express", 
    "id": 1, 
    "__v": 0, 
    "updated_at": "2017-01-18T11:34:05.416Z" 
}

Затем я добавил задний конец с наблюдаемыми. Теперь форма отправляет объект, я вижу, могу ли я включить его, чтобы он был в правильной форме.

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

addItem(course) { 
    this.storage.post(course).subscribe((data: any) => 
    {console.log(JSON.stringify(data)); return (data); }, error => 
    {console.log(error)});; }

я все еще могу видеть объект, как я толкая его на службу от моего основного компонента с console.log():

{"name":"test","id":"1234","desc":"test","start":"2017-01-30‌","end":"2017-02-03"‌}

Но когда он на самом деле попадает в базу данных, ни одно из полей из формы не присутствуют:

{ 
    "_id": "588f251bff96fa0004e0c2cd", 
    "__v": 0, 
    "updated_at": "2017-01-30T11:35:55.567Z" 
}"

Кроме того, массив все еще возвращается - я вижу его с помощью console.log(), но мой ngFor больше не инициирует компоненты.

Ошибок не существует.

Что я должен проверить?

источник

2017-01-30 Boris K

ли ваш курс список должны сохраняться между сеансами? Если нет, почему бы не использовать службу для хранения данных вместо локального хранилища? –

Убедитесь, что ваши поля действительно привязаны к вашим компонентам формы. –

Бен-я больше не использую локальное хранилище. Теперь, используя сервис, подключенный к автономному терминалу Express/Mongo, к которому идут эти объекты. –

Получил!

Первый вопрос был правильно подписан на наблюдаемый.

ngOnInit() { 
    this.appListService.getAppList() 
    .subscribe(res => this.courses = res); 
}

The App Список услуг просто выступает в качестве менеджера в этом случае, так он просто возвращается наблюдаемым:

constructor(private storage:CoursesService) { } 
getAppList() { 
    return this.storage.get(); 
}

Курсов Service делает запрос GET для внутреннего интерфейса:

get(): Observable<Course[]> { 
    return this.http.get(this.BaseUrl) 
        .map((res:Response) => res.json()) 
        .catch(this.handleError); 
        }

Когда полученный наблюдаемый проходит до основного компонента, ngFor работает нормально.

Теперь, для POST. Прежде всего, я должен был JSON.stringify() тела, как это:

post(course: Course): Observable<Course[]> { 
    let courseString = JSON.stringify(course); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(this.BaseUrl, courseString, options) 
       .map((res:Response) => res.json()) 
       .catch(this.handleError); 
    }

Затем я пошел на заднем конце и отрегулировал POST, так что вместо ответа с сообщением успеха, он ответил результаты общего запроса GET.

Теперь все работает отлично (за всю работу, которую еще предстоит сделать, конечно, за исключением.)

источник

2017-01-31 13:02:17

Угловые 2 * ngFor и отправка формы перестала работать, когда переехал в наблюдаемые

ответ

Смежные вопросы