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

Question

我有一个组件可以在我的应用中发布评论，但我需要刷新页面以显示新评论。刷新前我只有一个空白框（cf screenshot） 仅供参考：我有一个组件模板来获取评论，还有一个用于发布评论的捆绑包。 我不明白我做错了什么......？

我的服务

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;
            }
    );

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

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

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