Question

我使用Angular 4作为前端来构建一个以Node JS作为后端的应用程序。前端将从SQL数据库中获取数据并显示表单。因为，这个获取可能需要一段时间才能部署，我想放一个＆＃34;请等待＆＃34;获取数据时的消息。现在我使用了异步管道，主题和可观察对象以及一个简单的超时功能来测试它的工作原理。我试过这段代码。

在.ts文件中：

dataReady = new Subject<any>();
dataReadyObs = new Observable<any>();

constructor() {
  this.dataReadyObs = this.dataReady.asObservable();
}

ngOnInit() {
    someFunc() {
       setTimeout(function() {
       this.dataReady.next(true);
       }.bind(this), 2000);
    }
}

在html文件中：

<form *ngIf="dataReadyObs | async">

</form>

<h3 *ngIf="!dataReadyObs | async"> Please wait ... </h3>

但是＆＃34;请等待＆＃34;消息永远不会显示，只有2秒后的表单。是个！操作员在使用管道时不适用？我设法用ng-template解决了这个问题，但是如果需要not运算符，有没有办法将它用于管道？

<div *ngIf="dataReadyObs | async; else waitmessage">
  <form>

  </form>
</div>

<ng-template #waitmessage>
  <h3>Please wait ...</h3>
</ng-template>

Answer 1

你可以使用pipes.To使它工作，你需要用（）这样写。导致管道是2操作所以角度为'false |异步'

<h3 *ngIf="!(dataReadyObs | async)"> Please wait ... </h3>

Answer 2

遵循的方式

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    NxModule.forRoot(),
    AppRoutingModule,
    WidgetsModule
  ],
  providers: [],
  entryComponents: [
    WidgetsModule
  ],
  bootstrap: [AppComponent]
})

因为<h3 *ngIf="(dataReadyObs | async) === false"> Please wait ... </h3>至少会产生tslint错误

不在Angular 4中使用异步管道进行操作

2 个答案: