Question

有没有办法在按钮点击时重新加载页面？

<button ion-button (click)="reload()"></button>
 <ion-row *ngFor="let file of MyAudioFiles let i = index  ">{{file.name}}</ion-row>

MyAudioFiles: any[] = [];

reload(){
  // what should I write to reload the current page on button click in ionic2 
}

  ListAudioFiles() {
        console.log("list obj", obj);
        File.listDir(cordova.file.externalRootDirectory, 'Vanan/Audios').then(
            (allFiles) => {
                // do something

                console.log("we have audio files", allFiles);
                console.log("we have audio files", allFiles.length);
                for (var i = 0; i < allFiles.length; i++) {
                    this.MyAudioFiles.push({
                        audio: allFiles[i],
                        status: false,

                    });
                    console.log(this.MyAudioFiles);
                }

考虑我有一个列表，我删除该列表中的1个项目。删除成功执行，但在UI中，项目计数不会减少。如果我移回页面并再次返回列表页面，那么我可以看到列表中的更改。

Answer 1

您可以通过Observables获取数据asnycron。这样您就不需要刷新应用程序，只需将新值放入observable-stream中，它就会自动更改。在计数器上放置一个很好的更改效果样式，以便用户可以看到计数器已更改。

Answer 2

由于您只想更新数组MyAudioFiles，因此无需刷新整个组件，只需在删除后更新列表即可。

为此，进行一些更改，摆脱将您的数组声明为any。创建一个界面，您可以将响应转换为并使用map而不是迭代响应。

所以界面可以是：

export interface AudioFile {
  audio: string;
  status: boolean;
}

在您检索此数据的位置，请使用map：

listDir(...) {
  .....
  .toPromise()
  .then(res => res.json().map((x: any) => <AudioFile>{audio: x, status: false})
}

然后在您的组件中，声明类型为MyAudioFiles

的AudioFile[]

MyAudioFiles: AudioFile[] = [];

以及检索AudioFiles的方法：

ListAudioFiles() {
  File.listDir(cordova.file.externalRootDirectory, 'Vanan/Audios')
     .then(data => {
        this.MyAudioFiles = data;
     });
}

现在当你删除某些内容时，你只需再次调用ListAudioFiles，这会更新该列表，如下所示：

delete() {
  File.delete(....)
    .then(res => {
       console.log(res);
       this.ListAudioFiles(); // add this!
    });
}

希望这有帮助！：）

点击按钮重新加载页面

2 个答案: