angular - 如何使用异步管道检查在 View 中呈现的 Observable 的长度

Question

我使用 spring boot rest 创建了一个 rest 端点，以获取所有员工的列表 (GET) 并注册一名员工 (POST)。 所以我决定创建一个组件，其中我有一个表单来在顶部注册员工，并在下方呈现所有员工。

import { BrowserModule } from "@angular/platform-browser";
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {
  Component,
  NgModule,
  Injectable,
  OnInit
} from "@angular/core";
import { HttpClientModule, HttpClient, HttpHeaders } from "@angular/common/http";
import {Observable} from 'rxjs/Observable';
import {
  map, switchMap, tap
} from "rxjs/operators";

@Component({
  selector: "recap-app",
  template: `
<employee-details-form></employee-details-form>
<employee-list-view></employee-list-view>
  `
})
class RecapAppComponent{

}


@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [RecapAppComponent, EmployeeDetailsFormComponent, EmployeeListViewComponent, LoadingViewComponent],
  bootstrap: [RecapAppComponent],
  providers: [EmployeeService]
})
export class MainModule {

}

platformBrowserDynamic().bootstrapModule(MainModule);

然后开始，我开始创建我的服务来处理域模型的获取和发布请求，如下所示

//Use this for the employee array (2)
class Employee{
  constructor(public id : number,
    public firstName : string,
    public lastName : String,
    public email : string){}
}

//I get this from the endpoint (1)
class Response{
  constructor(public status: number,
    public message : string,
    public data : any){};//I get an Employee[]
}

@Injectable()
export class EmployeeService{

  apiRoot: string = "http://localhost:8080";
  apiURL: string = `${this.apiRoot}/employees/`
  constructor(private restHttpClient: HttpClient) {}

  //So I created a GET service which returns an observable (3)

  getAllEmployees() : Observable<Employee[]> {
    console.log("In get service " + this.apiURL);

    //I had to set CORS as its not disabled in my browser (4)

    let headers = new HttpHeaders({'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods' :  'POST, GET, OPTIONS, DELETE, PUT',
    'Access-Control-Max-Age' : '1000',
    'Access-Control-Allow-Headers' : 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token'});

    //I make the get request, and with that observable   (5)

    let check = this.restHttpClient.get<Response>(this.apiURL,{headers});

    //I pass it through this operator which extracts the employees array from 
    // the response object and returns an employee array (6)

    let doubleCheck = check.pipe(
      map(response => {
        if(response.data.length === 0){
          console.log(response.data.length);
          return response.data;
        }else{
          return response.data.map(employeeJsonOb => {
            return new Employee(employeeJsonOb.id,
              employeeJsonOb.firstName,
            employeeJsonOb.lastName,
          employeeJsonOb.email)
          });
        }
    }));
    return doubleCheck;
  }
  //yet to be implemented
  registerNewEmployee(employee : Employee){}
}

@Component({
  selector: "employee-list-view",
  template: `

  <!--But when I got no records I wanted to display this div
   but I couldn't --> (9)

  <div *ngIf = "employees.length$ === 0">
    <p> No records found </p>
  </div>
  <div>
    <ul class="list-group">
      <!--Then when I iterated by adding some employees
          I was able to see the names--> (8)
      <li class="list-group-item" *ngFor = "let employee of employees | async">
        {{employee.firstName}}
      </li>
    </ul>
  </div>
  `
})
class EmployeeListViewComponent implements OnInit{

  employees : Observable<Employee[]>;
  private loading: boolean = false;
  constructor(private employeeService: EmployeeService) {}

  //Then I used the onInit hook to try to fetch all employees 
  //on startup if there were any. (7)
  ngOnInit() {
    console.log("Entered onInit");
    this.employees = this.employeeService.getAllEmployees();
  }
}

@Component({
  selector: "employee-details-form",
  template: `
  <div>
  <p>Form goes here</p>
  </div>
  `
})
class EmployeeDetailsFormComponent{
//Yet to be implemented
}

我一直无法解决第 (9) 点。

如有任何帮助，我们将不胜感激。

Answer 1

您可以执行以下操作:

<div *ngIf="!(employees | async)?.length">
  <p> No records found </p>
</div>

0 是一个伪值，因此您不需要进行显式比较。

question mark将捕获由 (employees | async) 未定义/空而不是空数组引起的任何问题。