需要刷新页面才能在 Angular2 中显示我的新内容

Question

我有一个组件可以在我的应用程序中 post 发表评论，但我需要刷新我的页面以显示新评论。刷新前我只有一个空白框（参见屏幕截图）仅供参考：我有一个组件模板来获取评论，另一个包用于 post 评论。我不明白我做错了什么...？

我的服务

userAddReview(params) {
    console.log('sending request');
        return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews',params)
        .map(
            res => {
                let newReview = res.json();
                this.reviews.push(newReview);
                console.log(this.reviews);
                return newReview;
            }
        );
}

我的评论表单组件

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { URLSearchParams } from '@angular/http';
import { JwtHelper } from 'angular2-jwt';
import { NavController } from 'ionic-angular';
import { WpService, AuthService } from '../../services/index';
import { ProfilePage } from '../../pages/profile/profile';
import { ReviewList } from '../reviewList/reviewList.component';

@Component({
    selector: 'review-form',
    templateUrl: './reviewForm.html'
})

export class ReviewFormComponent {

    @Input() postId: number;
    @Input() review: any;
    @Input() isEditMode: boolean;
    @Output() isEditModeChange = new EventEmitter();
    @Output() reviewChange = new EventEmitter();
    jwtHelper: JwtHelper = new JwtHelper();
    statusMessage = '';
    isEditing: boolean = false;

    constructor(
        private wp: WpService, 
        private auth: AuthService, 
        private nav: NavController,
        ) { 
    }

    ngOnInit() {
        this.review.post = this.postId;
        this.review.author = this.wp.getCurrentAuthorId();
        if (this.review.author === null) {
            this.review.author = 0
            console.log('user_id', this.review.author)
        }
    }

    onCancel() {
        this.reviewChange.emit({
            content: {rendered: ''},
            author: null,
            post: this.postId
        }); 
        this.isEditing = false;
        this.isEditModeChange.emit(false);
        this.statusMessage = '';
        return false;
    }

    showPanel() {
        return (this.isEditing) || this.isEditMode;
    }

    submitReview(form) {
        console.log(this.review, form);
        let params = new URLSearchParams;
        params.append('id', this.postId.toString());
        params.append('user_id', (this.review.author).toString());
        params.append('name', this.review.rating_name);
        params.append('email', this.review.rating_user_email);
        params.append('title', this.review.rating_title);
        params.append('description', this.review.rating_comment);
        params.append('rating', this.review.rating_score);
        console.log(params);
        this.wp.userAddReview(params)
            .subscribe(
                newReview => {
                    this.statusMessage = "Review added successfully!";
                    //clear form
                    form.reset();
                },
                error => {
                    console.log(error._body);
                    this.statusMessage = error._body;
                }
        );
    }
}

我的评论表单模板

<form name="reviewForm" #reviewForm="ngForm" novalidate *ngIf="showPanel()">
    <div *ngIf="!reviewText.valid && (reviewText.dirty || reviewText.touched)" class="alert alert-danger padding">review is required</div>

    <div class="padding">{{statusMessage}}</div>
    <ion-item *ngIf="!auth.authenticated()">
        <ion-input type="text" [(ngModel)]="review.rating_name" #reviewUsername="ngModel" name="reviewUsername" placeholder="enter your name here..." required></ion-input>
        <ion-input type="text" [(ngModel)]="review.rating_user_email" #reviewUserEmail="ngModel" name="reviewUserEmail" placeholder="enter your email here..." required></ion-input>
    </ion-item>
    <ion-item>
        <ion-range min="0" max="10" step="1" snaps="true" [(ngModel)]="review.rating_score" #reviewScore="ngModel" name="reviewScore">
            <ion-label range-left>0</ion-label>
            <ion-label range-right>10</ion-label>
        </ion-range>
    </ion-item>
    <ion-input type="text" [(ngModel)]="review.rating_title" #reviewTitle="ngModel" name="reviewTitle" placeholder="enter your review title..." required></ion-input>
    <ion-textarea
        [(ngModel)]="review.rating_comment"
        #reviewText="ngModel"
        name="reviewText"
        type="text"
        rows="2"
        placeholder="enter your review..."
        required
        >
    </ion-textarea>

    <ion-grid>
        <ion-row>
            <ion-col *ngIf="!isEditMode"><button ion-button block (click)="submitReview(reviewForm)" [disabled]="!reviewForm.valid">Add</button></ion-col>
            <ion-col *ngIf="isEditMode"><button ion-button block (click)="updateReview(reviewForm)" [disabled]="!reviewForm.valid">Update</button></ion-col>
            <ion-col width-33><button ion-button block (click)="onCancel()">Cancel</button></ion-col>
        </ion-row>
    </ion-grid>

</form>

<p *ngIf="!showPanel()" (click)="isEditing = true;">Add Review</p>

我的评论列表组件

import { Component, Input } from "@angular/core";
import { Http } from '@angular/http';
import { AlertController, ToastController } from 'ionic-angular';
import { SITE_URL, WpService } from '../../services/index';

@Component({
    selector: 'reviews-list',
    templateUrl: './reviewsList.html'
})

export class ReviewsListComponent {

    @Input() postId: number;
    wpApiURL: string = SITE_URL + '/wp-json/wp/v2';
    reviews: any = [];
    authorId = null;

    constructor(
        private http: Http, 
        private wp: WpService,
        private alertCtrl: AlertController,
        private toastCtrl: ToastController
        ) {
    }

    ngOnInit(){
        // Load reviews
        this.loadReviews(this.postId);
    }

    loadReviews(postId) {
        this.wp.getReviewsByPostId({reviews: postId}).subscribe(
            data => {
                console.log(data);
                this.reviews = data;
            },
            error => {}            
        );
    }
}

我的评论列表模板

<h3>Reviews</h3>
<div *ngIf="reviews.length > 0">
    <ion-card *ngFor="let review of reviews">
        <ion-item>
            <h2>{{review.rating_user_name}}</h2>
        </ion-item>

        <ion-card-content [innerHTML]="review.rating_score"></ion-card-content>
        <ion-card-content [innerHTML]="review.rating_title"></ion-card-content>
        <ion-card-content [innerHTML]="review.rating_comment"></ion-card-content>
    </ion-card>
</div>

<div *ngIf="reviews.length === 0">
        No review yet.
</div>

Answer 1

您没有更新订阅中的评论集。

你需要这样做：

 this.wp.userAddReview(params)
        .subscribe(
            newReview => {
                this.statusMessage = "Review added successfully!";
                this.reviews.push(newReview); //add the new review to the local collection
                //clear form
                form.reset();
            },
            error => {
                console.log(error._body);
                this.statusMessage = error._body;
            }
    );

编辑-- 在您的组件中，您似乎没有组件中的评论集合。我们用于从组件调用服务的典型模式是从您的组件订阅服务 class 中定义的可观察对象。在订阅承诺中，将发出的值映射到本地组件变量，然后在视图模板中使用该本地组件变量。

因此，在您的示例中，您缺少一个 'reviews' 组件变量，该变量将根据订阅发出的值填充到您的组件中。

以这种方式设计交互可以减少服务和视图模板之间的耦合。

需要刷新页面才能在 Angular2 中显示我的新内容

Page need to be refresh to display my new content in Angular2

push

ionic2

angular

我的服务

我的评论表单组件

我的评论表单模板

我的评论列表组件

我的评论列表模板