需要刷新页面才能在Angular2

时间：2017-03-23 12:17:00

标签： angular ionic2 push

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

enter image description here

我的服务

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>

1 个答案:

答案 0 :(得分：3)

您未在订阅中更新评论集。

你需要做这样的事情：

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

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

因此，在您的示例中，您错过了评论＆＃39;组件变量，它将从订阅中发出的值填充到组件中。

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

相关问题
最新问题