Question

我正在尝试显示来自REST API的数据，该数据需要一些时间来映射所需的请求。因此，我尝试了Angular中的noWhiteSpaceOnChange() { const validationRegex = /^((?!\s{1,}).)*$/ if (!validationRegex.test(this.data.projectName)) { // this.data.projectName= ''; let str = this.data.projectName; str = str.replace(/[^A-Z0-9]+/ig, "_"); this.data.projectName=str; } }管道：

这是课程：

async

和模板：

  private json: Observable<JsonResponseDTO>;

  constructor(private dtoService: PoolDTOServiceService) { }

  ngOnInit() {
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.getPools();
  }

在很短的时间内，显示加载模板，但随后出现错误：

<div *ngIf="json | async as json; else loading">
  <ng-container *ngIf="json.pools.length >=134; else noItems">
    <div *ngFor="let pool of json.pools">
      {{p.name}}
    </div>
  </ng-container>
  <ng-template #noItems>No items</ng-template>
</div>
<ng-template #loading>Loading</ng-template>

在模板中，第7:41行。
有人可以帮我吗？我可以正确使用异步管道吗？

Answer 1

 <div *ngFor="let pool of json.pools">
      {{p.name}}
 </div>

您的p未定义。您想要的是：

 <div *ngFor="let pool of json.pools">
      {{pool.name}}
 </div>

Answer 2

找不到p.name，因为p没有在任何地方定义。您应该修复该错字并使用pool.name：

<ng-container *ngIf="json.pools.length >=134; else noItems">
    <div *ngFor="let pool of json.pools">
      {{pool.name}}
    </div>
  </ng-container>

用asnyc管道在HTML中检索数据的Angular 6问题

2 个答案: