Значение для ввода компонента не определено в угловых

Question

Я пытаюсь передать сообщение из одного компонента в другой компонент, который имеет форму редактирования. Внешний компонент извлекает сообщение и передает его во внутренний компонент для редактирования, но по какой-то причине он не проходит, поэтому я получаю кучу неопределенных ошибок.

Внешний компонент HTML выглядит следующим образом:

<wie-edit-post-form *ngIf="post | async; else loading"></wie-edit-post-form>
<ng-template #loading>
    <wie-loading></wie-loading>
</ng-template>

Внешний набор текста выглядит так:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { Store } from '@ngrx/store';

import { Observable } from 'rxjs/Observable';

import {Post} from "../../common/models/post.model";

import * as fromRoot from '../../common/reducers';
import * as post from '../../common/actions/posts.actions';

@Component({
    selector: 'wie-edit-post',
    templateUrl: "./edit-post.component.html",
    styleUrls: ['./edit-post.component.html']
})
export class EditPostComponent {

    public post: Observable<Post>;

    constructor(private route: ActivatedRoute, private router: Router, private store: Store<fromRoot.State>) {

        this.route.params.subscribe((params) => {
            this.post = this.store.select(fromRoot.getSelectedPost).filter((storePost) => (storePost && storePost.id == parseInt(params.id, 10)) ).map((storePost) => {console.log(storePost); return storePost; });
            this.store.dispatch( new post.LoadPostAction((parseInt(params.id, 10))) );
        })
    }


}

Внутренний компонент HTML выглядит так:

<md-card>
    <md-card-header>
        <md-card-title>
            <h1>Edit Post</h1>
        </md-card-title>
    </md-card-header>
    <md-card-content>
        <md-input-container>
            <textarea [(ngModel)]="post.content" mdInput placeholders="Prank"></textarea>
        </md-input-container>
    </md-card-content>
    <md-card-actions>
        <button md-raised-button>Cancel</button>
        <button color="accent" md-raised-button>Edit</button>
    </md-card-actions>
</md-card>

Внутренний компонент машинопись выглядит так:

import { Component, Input, OnInit } from '@angular/core';
import {Post} from "../../common/models/post.model";

@Component({
    selector: 'wie-edit-post-form',
    templateUrl: './edit-post-from.component.html'
})
export class EditPostFormComponent implements OnInit {

    @Input()post: Post;

    ngOnInit() {
        console.log(this.post);
    }
}

Консоль внешнего компонента console.log в операторе store.select правильно печатает сообщение в консоль, но оператор console.log внутреннего компонента в функции ngOnInit сообщает, что оно не определено, поэтому хранилище правильно отправляет LoadPostAction и извлекает сообщение из сервер, но во внутреннем компоненте я продолжаю получать сообщение об ошибке, что post.content не определен, и содержимое сообщения никогда не отображается в форме.

Любая помощь будет оценена. Спасибо

Answer 1

Так что... это было что-то глупое, на самом деле я не передавал сообщение в компонент. У меня был $ngIF="post | async; else loading" но у меня не было [post]="post | async"