角度2视图未刷新

Question

主要书籍组件代码（book.component.ts）

...
.filter( f -> getFolderLastIdx( f ).isPresent() )
.flatMap( newLoadFile ->  executeCommand( Id ) )
.ifPresent( newLoadFile -> {
    if ( executeCommand( Id ) ) {
        moveFileStatusFlow.accept( newLoadFile, transactionId, "success" );
        executePostScriptCommand( transactionId, batchId );
    } else {
        moveFileStatusFlow.accept( newLoadFile, transactionId, "fail" );
}

服务页面（book.service.ts）

import { Component, OnInit } from '@angular/core';
import { BookService } from './../app/book.service';
import { Observable } from 'rxjs/observable';
import 'rxjs/Rx';
import { Book } from './../app/Book';

@Component({
    selector: 'book',
    moduleId: module.id,
    templateUrl: 'book.component.html',
    providers: [BookService],
})

export class BookComponent {
    books: Book[];

    constructor(private bookService: BookService) {
        this.bookService.getBooks()
            .subscribe(books => {
                this.books = books;
            });
    }
    removeBook(id: number) {
        var books = this.books;
        this.bookService.removeBook(id).subscribe(data => {
            if (data.n == 1) {
                for (var i = 0; i < books.length; i++) {
                    if (books[i].id == id) {
                        books.splice(i, 1);
                    }
                }
            }
        });
    }
}

书籍组件html代码（book.component.html）

import { Injectable } from '@angular/core';
import { Http,Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class BookService{
    constructor(private http: Http){
        console.log('BookService Started....')
    }

    headers:string;

    getBooks(){
        return this.http.get('/api/books').map(res => res.json());
    }

    removeBook(id: number){
        return this.http.delete('/api/book/'+ id).map(res => res.json());
    }
}

当我点击删除通过手动重新加载页面工作正常但我需要刷新automaticllay

即时使用monogoose作为数据库和rest api

NB ：没有错误

Answer 1

首先，不要在左右循环中拼接，它可以cause issues。

removeBook(id: number) {
        var books = this.books;
        this.bookService.removeBook(id).subscribe(data => {
        if (data.n == 1) {
          let index = books.findIndex(book=>book.id===id)
          books.splice(i, 1);
        }
        });
    }

由于您修改而没有重新定位数组，ngFor因为您未指定trackBy而未收到通知：

<div *ngFor="let book of books; trackBy:trackById">

并在您的ts文件中：

trackById(book:Book,index:number){
    return book.id;
}

否则，您只需重新分配而不是修改组件中的数组：

this.bookService.removeBook(id).subscribe(data => {
            if (data.n == 1)
                this.books = this.books.filter(book=>book.id!==id);
        });

Answer 2

您可以在 book.component.ts 中更改代码，如下所示：

export class BookComponent {
    books: Book[];

    constructor(private bookService: BookService) {}

    ngOnInit(){
        this.GetBooks();
    }

    GetBooks(){
        this.bookService.getBooks()
            .subscribe(books => {
                this.books = books;
        });
    }

    removeBook(id: number) {
        var books = this.books;
        this.bookService.removeBook(id).subscribe(data => {
            this.GetBooks();
        });
    }
}

此处，当您从api获得响应时，将调用方法GetBooks()，您的页面将自动重新加载。