Question

我正在尝试根据从服务中检索到的列表刷新UI。像这样：

HTML部分：

<li *ngFor="let test of testsList" class="list-inline-item">
       <div class="row m-row--no-padding align-items-center">
             <div class="col">
               <button
               [disabled]="test.locked"
               [ngClass]="{locked: test.locked, disabled: test.status == 1}"
               (click)="selectTest(test)"
               class="square"></button>
             </div>
        </div>
    </li>

我的testsList来自对API的承诺，并且在ngOninit中撤消了它：

this._myService.getAllTests().then((tests: TestDto[]) => {
        this.testsList = tests;
}

从一个子组件开始，我想回到这个组件（根目录），并绘制更新的测试列表。要导航回父组件，我使用router.navigate(...)：

this._router.navigate(['app/tests/all']);

正在更新后台数据，因为我可以检入数据库以及手动刷新页面时。但是当我导航到它时，UI不会显示更改...

我尝试了this，this之类的事情，还尝试了this one，但我认为我没有以正确的方式实现它……

作为附加信息，我附上了页面结构：

/tests (root page)
   |
(child pages)
   |----> all
   |---->description
   |---->....
   |---->summary

我从/all跳到/summary，我更新了/summary中的某些数据，这些数据必须在跳回到/all页面时呈现。

如何刷新UI或绑定到值，以便在调用'app/tests/all'页时更新它？

编辑：

getAllTests() {
    return new Promise((resolve, reject) => {
        this._testsService.getAllTests().subscribe( (result) => {
            this.tests = this.orderAsc(result.items);
            resolve(this.tests);
        }, error => {
            console.log('No tests loaded from Database');
            reject();
        });
    });
}

Answer 1

好的，您的问题是您用Promise包装了一个可观察对象，而Promises仅处理1个异步操作，相反，该可观察对象就像事件流。您可以在这里看到关于它们之间区别的很好的解释：What is the difference between Promises and Observables?

因此，对于您的情况，您可以直接返回如下所示的可观察对象：

getAllTests() {
  return this._testsService.getAllTests().pipe(
    map((result) => {
      this.tests = this.orderAsc(result);
      return (this.tests);
    }),
    catchError(err => ('No tests loaded from Database'))
  );
}

使用地图，您可以转换来自数据库的结果，并且 getAllTests（）现在返回一个可观察对象，您可以像这样在组件中进行订阅：

this._myService.getAllTests().subscribe((tests: TestDto[]) => {
  this.testsList = tests;
});

甚至更好的是，您可以使用html中的异步管道来代替订阅组件：

<li *ngFor="let test of testsList$ | async" class="list-inline-item">

在组件中，您必须声明 Observable 类型的变量：

  public testsList$: Observable<TestDto[]>;

像这样将其分配给函数_testsService.getAllTests（）：

this.testsList$ = this._myService.getAllTests();

Answer 2

也许这不是最合适的方法，但我将其添加到需要刷新的Component的构造函数中：

this._router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
          };

它奏效了...

如何在Angular 2中route.navigate之后刷新组件UI？

2 个答案: