我在我的 Angular HTML 模板中做错了啥? [复制]
Posted
技术标签:
【中文标题】我在我的 Angular HTML 模板中做错了啥? [复制]【英文标题】:What I m doing wrong in my Angular HTML template? [duplicate]我在我的 Angular HTML 模板中做错了什么? [复制] 【发布时间】:2020-02-22 14:15:45 【问题描述】:在可观察性方面我还不太适应角度,所以我正在训练自己
我正在编写一个管理拳击俱乐部的小应用程序
我想显示当前所选拳击手最近参加的 3 节课
所以我尝试了以下
<div class="col-6">
<div *ngIf="lessons">
<div *ngIf="(lessons|async).length > 0">
<h2>les 3 derniere lessons </h2>
<hr>
<ul class="list-group" style="user-select: auto;">
<li *ngFor=" let lesson in (lessons | async) | slice:0:3; let i=index "
class="list-group-item d-flex justify-content-between align-items-center"
style="user-select: auto;">
<a [routerLink]="['/lesson', lesson.id, 'view' ]">
<span class="badge badge-primary badge-pill" style="user-select: auto;">i</span>
lesson.detail
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="versements">
<div *ngIf="(versements|async).length > 0">
<h2>les 3 derniere versements </h2>
<hr>
<ul class="list-group" style="user-select: auto;">
<li *ngFor=" let versement in (versements | async ) | slice:0:3; let i=index "
class="list-group-item d-flex justify-content-between align-items-center"
style="user-select: auto;">
<a [routerLink]="['/lesson', lesson.id, 'view' ]">
<span class="badge badge-primary badge-pill" style="user-select: auto;">i</span>
versement.montant? : versement.date | date :'short'
</a>
</li>
</ul>
</div>
</div>
</div>
其中组件ts代码如下:
import Component, OnInit from '@angular/core';
import ActivatedRoute from '@angular/router';
import IBoxer from 'app/shared/model/boxer.model';
import JhiDataUtils, JhiAlertService from 'ng-jhipster';
import Observable, of from 'rxjs';
import MAN_PICTURE_PATH from 'app/shared/constants/input.constants';
import IVersement from 'app/shared/model/versement.model';
import VersementService from '../versement/versement.service';
import LessonService from '../lesson/lesson.service';
import HttpResponse, HttpErrorResponse from '@angular/common/http';
import ILesson from 'app/shared/model/lesson.model';
@Component(
selector: 'jhi-boxer-detail',
templateUrl: './boxer-detail.component.html'
)
export class BoxerDetailComponent implements OnInit
boxer: IBoxer;
versements: Observable<IVersement[]>;
lessons : Observable<ILesson[]>;
manPicturePath: any;
constructor(
protected jhiAlertService: JhiAlertService,
protected activatedRoute: ActivatedRoute,
protected dataUtils: JhiDataUtils,
protected versementService: VersementService,
protected lessonService: LessonService
)
ngOnInit()
this.manPicturePath = MAN_PICTURE_PATH;
this.activatedRoute.data.subscribe(( boxer ) =>
this.boxer = boxer;
);
this.versementService
.query( boxerID: this.boxer.id , this.versementService.BY_BOXER_ID)
.subscribe(
(res: HttpResponse<IVersement[]>) => this.fetchVersementsDatas(res.body),
(err: HttpErrorResponse) => this.JhiAlertError(err)
);
this.lessonService
.query( boxerID: this.boxer.id,this.lessonService.BY_BOXER_ID)
.subscribe(
(res:HttpResponse<ILesson[]>) => this.fetchLessonsDatas(res.body),
(err:HttpErrorResponse) => this.JhiAlertError(err)
);
fetchLessonsDatas(lessons)
this.lessons = of(lessons);
fetchVersementsDatas(versements?: IVersement[])
this.versements = of(versements);
JhiAlertError(errorMessage: any)
this.jhiAlertService.error(errorMessage, null, null);
byteSize(field: any)
return this.dataUtils.byteSize(field);
openFile(contentType: any, field: any)
return this.dataUtils.openFile(contentType, field);
previousState()
window.history.back();
我的模板处理不好,但我不知道在哪里
这是我的控制台错误提示
core.js?f18e:6014 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'li'. (" > 0"> <h2>les 3 derniere lessons </h2> <hr> <ul class="list-group" style="user-select: auto;"> <li [ERROR ->]*ngFor=" let lesson in (lessons | async) | slice:0:3; let i=index " class="list-group-item d-flex jus"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:1790
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("ngth > 0"> <h2>les 3 derniere lessons </h2> <hr> <ul class="list-group" style="user-select: auto;"> [ERROR ->]<li *ngFor=" let lesson in (lessons | async) | slice:0:3; let i=index " class="list-group-item d-flex"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:1786
Parser Error: Unexpected end of expression: versement.montant? : versement.date | date :'short' at the end of the expression [ versement.montant? : versement.date | date :'short' ] in ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2622 (".id, 'view' ]"> <span class="badge badge-primary badge-pill" style="user-select: auto;">i</span>[ERROR ->] versement.montant? : versement.date | date :'short' </a> </li> </ul> </div> </div> </div> </"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2622
Parser Error: Conditional expression versement.montant? requires all 3 expressions at the end of the expression [ versement.montant? : versement.date | date :'short' ] in ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2622 (".id, 'view' ]"> <span class="badge badge-primary badge-pill" style="user-select: auto;">i</span>[ERROR ->] versement.montant? : versement.date | date :'short' </a> </li> </ul> </div> </div> </div> </"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2622
Can't bind to 'ngForIn' since it isn't a known property of 'li'. ("0"> <h2>les 3 derniere versements </h2> <hr> <ul class="list-group" style="user-select: auto;"> <li [ERROR ->]*ngFor=" let versement in (versements | async ) | slice:0:3; let i=index " class="list-group-item d-f"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2310
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("h > 0"> <h2>les 3 derniere versements </h2> <hr> <ul class="list-group" style="user-select: auto;"> [ERROR ->]<li *ngFor=" let versement in (versements | async ) | slice:0:3; let i=index " class="list-group-item"): ng:///BoxingBoxerModule/BoxerDetailComponent.html@0:2306
【问题讨论】:
我现在应该考虑在循环一个简单数组时使用 in 和当我循环一个 observable 时使用 of 吗? 角度模板中没有let item in items
。始终使用let item of items
【参考方案1】:
要进行迭代,您需要使用以下语法*ngFor = "let value of values"
:
<li *ngFor="let versement of (versements | async ) | slice:0:3; let i=index">
...
</li>
As Angular docs says:
一个结构指令,它为每个项目呈现一个模板 收藏。该指令被放置在一个元素上,该元素成为 克隆模板的父级。
<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
i/users.length. user <span *ngIf="isFirst">default</span>
</li>
【讨论】:
以上是关于我在我的 Angular HTML 模板中做错了啥? [复制]的主要内容,如果未能解决你的问题,请参考以下文章