小编Jak*_*e11的帖子

如何将ngIf与ngFor结合

我是Angular的新手。

我想打印与分销商有关的产品清单。为此,我考虑过* ngFor * ngIf的代码如下:

<div class="distributors-here ui-g-12" *ngIf="distributors">
  <h2 >Distributors  <i class="fa icon fa-plus"(click)="showDialog()"></i></h2>
  <p class="error-message" *ngIf="errorMessage.length >0">Operation couldn't be executed:</p>
  <p class="error-message">{{errorMessage}}</p>
  <ul class="distributors-list ui-g-12">
    <li class="distributor-item ui-md-3 ui-g-6" *ngFor="let distributor of distributors ">
      <i class="fa icon fa-times remove-distributor"(click)="removeDistributor(distributor.id,distributor.name)"></i>
      <div class="distributor-item-content">
        <p>id: {{distributor.id}}</p>
        <p>name: {{distributor.name}}</p>
          <div *ngIf="products">
            <p>products</p>
            <ol>
              <li  *ngFor="let product of products" *ngIf="product.distributor.id == distributor.id">dist</li>
            </ol>
          </div>
      </div>
    </li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

因此,我想循环遍历products数组,如果product的分发服务器ID与其他阵列的分发服务器ID匹配,我将打印出新创建的li元素。

不幸的是我得到一个错误:

一个元素不能有多个模板绑定。仅使用一个名为“模板”或前缀为*的属性

[错误->] * ngIf =“ product.distributor.id == distributor.id”

有谁知道如何重构此代码以使其工作?

angular

2
推荐指数
2
解决办法
7530
查看次数

为什么 api 调用在 gh-pages 上不起作用

我刚刚写完我的天气应用程序,在本地主机上运行时,一切都按我的预期完美运行,但在我将其发布到 gh-pages 后,它在 API 调用完成后返回错误,这里是链接:

https://jake-j.github.io/weatherAPP/

有人可以帮我解决这个问题吗?

javascript api github reactjs

1
推荐指数
1
解决办法
2945
查看次数

NGRX影响如何将参数传递给withLatestFrom运算符

使用withLatestFrom时,我正在努力将参数传递给选择器,这是从加载动作有效负载中较早映射的

loadLocalSubServices$: Observable<Action> = this.actions$.pipe(
  ofType(LocalSubServiceTemplateActions.LocalSubServicesTemplateActionTypes.LoadLocalSubService),
  map((action: LocalSubServiceTemplateActions.LoadLocalSubService) => action.payload.globalSubServiceId),
  // and below I would like to pass globalSubServiceId
  withLatestFrom(this.store.pipe(select(fromLocalSubservices.getSearchParams(globalSubServiceId)))),
  map(searchParams => searchParams[1]),
  mergeMap((params) =>
    this.subServiceService.getLocalSubServices(params).pipe(
      map(localSubServices => (new LocalSubServiceTemplateActions.LocalSubServiceLoadSuccess(localSubServices))),
      catchError(err => of(new LocalSubServiceTemplateActions.LocalSubServiceLoadFail(err)))
    )
  )
);
Run Code Online (Sandbox Code Playgroud)

rxjs ngrx angular

1
推荐指数
3
解决办法
3668
查看次数

标签 统计

angular ×2

api ×1

github ×1

javascript ×1

ngrx ×1

reactjs ×1

rxjs ×1