Question

因此，在项目被删除后，我尝试在我的视图中刷新列表，但它似乎无法正常工作。项目删除正在按预期工作，因为当我手动刷新页面时，项目被正确删除。

这是我的组件类。

            fb[i][j].addActionListener(new ActionListener() {

                public void actionPerformed(ActionEvent e) {
                    JButton b = (JButton) e.getSource();
                    int x, y;
                    for (int i = 0; i < 15; i++) {
                        for (int j = 0; j < 15; j++) {
                            if(fb[i][j].equals(b)){
                                x = i;
                                y = j;
                                break;
                            }
                        }
                    }

                    if (x - 1 >= 0) {
                    if (fb[x - 1][y] != null) {
                        fb[x - 1][y].setBackground(Color.RED);
                    }
                    } else if (x + 1 < 15) {
                        if (fb[x + 1][y] != null) {
                            fb[x + 1][y].setBackground(Color.RED);
                        }
                    } else if (y - 1 >= 0) {
                        if (fb[x][y - 1] != null) {
                            fb[x][y - 1].setBackground(Color.RED);
                        }
                    } else if (y + 1 < 15) {
                        if (fb[x][y + 1] != null) {
                            fb[x][y + 1].setBackground(Color.RED);
                        }
                    }

                }
            });

编辑1：我的服务类：

import { Component, OnInit, Pipe} from '@angular/core';
import { Bootcamp } from './Bootcamp';
import { Bootcamptest } from './Bootcamptest';


@Component({
    selector: 'my-bootcamptest',
    styleUrls: ['./Scripts/Css/Testcss.css'],
    template: `

  <section>
    <section *ngIf="isLoading && !errorMessage">
    Loading our hyperdrives!!! Retrieving data...
  </section>

<table class="table">
    <tr>
        <th>
           naam
        </th>
        <th>
            description
        </th>
        <th>
           begindatum
        </th>
        <th>
           eindatum
        </th>
        <th></th>
    </tr>
    <tr *ngFor="let _bootcamp of bootcamp ">
        <td >
          {{_bootcamp.naam}}
        </td>
         <td >
       {{_bootcamp.description}}

        </td>
         <td >
          {{_bootcamp.begindatum | date:"dd/MM/yy"}}
        </td>
        <td >
     {{_bootcamp.einddatum | date:"dd/MM/yy"}}
        </td>

    </tr>


</table>


      <ul>
        <!-- this is the new syntax for ng-repeat -->
        <li *ngFor="let _bootcamp of bootcamp" >
            <a  (click)="selectBootcamp(_bootcamp)">
          {{_bootcamp.IdBootcamp}}
          </a>
        </li>
      </ul>
      <section *ngIf="errorMessage">
        {{errorMessage}}
      </section>

<section *ngIf="selectedBootcamp">
    <h2>You selected:  {{selectedBootcamp.naam}}</h2>
    <h3>Description</h3>
    <p>
       {{selectedBootcamp.naam}} 
    </p>
  </section>

 <a routerLink="/bootcampsmaken" routerLinkActive="active" class="btn btn-info" role="button">Create Bootcamp</a>
 <a routerLink="/dagpuntmaken" routerLinkActive="active" class="btn btn-info" role="button">Dagpunt maken</a>
 <div class="agenda">
        <div class="table-responsive">
            <table class="table table-condensed table-bordered">
                <thead>
                    <tr>
                        <th>Begindatum</th>
                        <th>Einddatum</th>
                        <th>Bootcamp</th>
                        <th>Wat houdt die in?</th> 
                        <th>Details</th>

                    </tr>
                </thead>
                <tbody>
                    <!-- Single event in a single day -->
                    <tr *ngFor="let _bootcamp of bootcamp" >
                        <td  class="agenda-date" class="active" rowspan="1">
                            <div class="dayofmonth"> {{_bootcamp.begindatum | date:"dd"}} </div>
                            <div class="dayofweek"> {{_bootcamp.begindatum | date:"EEEE"}}</div>
                            <div class="shortdate text-muted">{{_bootcamp.begindatum | date:"MMMM"}}, {{_bootcamp.begindatum | date:"y"}}</div>
                        </td>
                            <td  class="agenda-date" class="active" rowspan="1">
                            <div class="dayofmonth"> {{_bootcamp.einddatum | date:"dd"}} </div>
                            <div class="dayofweek"> {{_bootcamp.einddatum | date:"EEEE"}}</div>
                            <div class="shortdate text-muted">{{_bootcamp.einddatum | date:"MMMM"}}, {{_bootcamp.einddatum | date:"y"}}</div>
                        </td>
                        <td class="agenda-time">
                                  {{_bootcamp.naam}}
                        </td>
                        <td class="agenda-events">
                            <div class="agenda-event">
                                     {{_bootcamp.description}}
                            </div>
                        </td>
                        <td>
                            <div class="details">
                                      <a  routerLink="/bootcampsmaken" routerLinkActive="active" class="btn btn-info" role="button">Details</a>
                                        <a  (click)="DeleteBootcamp(_bootcamp.IdBootcamp)" class="btn btn-danger" role="button">Delete</a>
                            </div>
                        </td>
                    </tr>                 
                </tbody>
            </table>
        </div>
    </div>




  `
})

export class Bootcamplistcomponent implements OnInit {
    bootcamp: Bootcamp[] = [];
    selectedBootcamp: Bootcamp;
    errorMessage: string = '';
    isLoading: boolean = true;


    constructor(private bootcamptest: Bootcamptest) { }

    ngOnInit() {
        this.bootcamptest
            .getAll()
            .subscribe(
         /* happy path */ p => this.bootcamp = p,
         /* error path */ e => this.errorMessage = e,
         /* onComplete */() => this.isLoading = false);
    }
    selectBootcamp(bootcamp: Bootcamp) {
        this.selectedBootcamp = bootcamp;

    }
    DeleteBootcamp(id: number) {
        this.bootcamptest.deleteselected(id);
        this.bootcamptest
            .getAll()
            .subscribe(
        /* happy path */ p => this.bootcamp = p,
         /* error path */ e => this.errorMessage = e,
         /* onComplete */() => this.isLoading = false);

    }
}

Answer 1

成功删除像这样的项目后，

调用getList方法

    constructor(private bootcamptest: Bootcamptest) { }

    ngOnInit() {
        this.getList();
    }
    getList(){
        this.bootcamptest
            .getAll()
            .subscribe(
        /* happy path */ p => this.bootcamp = p,
         /* error path */ e => this.errorMessage = e,
         /* onComplete */() => this.isLoading = false);
    }

    selectBootcamp(bootcamp: Bootcamp) {
        this.selectedBootcamp = bootcamp;

    }

    DeleteBootcamp(id: number) {
        this.bootcamptest.deleteselected(id)
            .subscribe(res=>{
                //when you get status that item is deleted succesflly
                //call again this.getList();
                })
    }

}

Answer 2

this.bootcamptest.deleteselected(id).subscribe(
        data => {
              let index = this.bootcamp.findIndex(x => x.id === id);
              this.bootcamp.splice(index,1);
                },
        err => {
            console.log('error');
         })

删除项目后列表不刷新

2 个答案: