Javascript 我在我的HTML模板中做错了什么？

我在角度上还不太舒服，所以我在训练自己

我正在写一个管理拳击俱乐部的小应用程序

我想展示当前选定拳击手的最后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>

第三节德尼尔课程



{{i}
{{lesson.detail}}


第三乐章德涅尔诗集



{{i}
{{versement.montant？}}:{{{versement.date}日期：'short'}

其中部件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();
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/router'导入{ActivatedRoute}；
从'app/shared/model/boxer.model'导入{IBoxer}；
从“ng jhipster”导入{JhiDataUtils，JhiAlertService}；
从'rxjs'导入{可观察的}；
从'app/shared/constants/input.constants'导入{MAN_PICTURE_PATH}；
从'app/shared/model/versement.model'导入{IVersement}；
从“../versement/versement.service”导入{VersementService}；
从“../lesson/lesson.service”导入{LessonService}；
从'@angular/common/http'导入{HttpResponse，HttpErrorResponse}；
从'app/shared/model/lesson.model'导入{ILesson}；
@组成部分({
选择器：“jhi拳击手细节”，
templateUrl:“./boxer detail.component.html”
})
导出类BoxerDetailComponent实现OnInit{
拳击手：伊博克斯；
诗句：可见；
经验教训：可观察；
manPicturePath：任何；
建造师(
受保护的JhilertService:JhilertService，
受保护的激活路由：激活路由，
受保护的数据工具：JhiDataUtils，
受保护的versementService:versementService，
受保护的lessonService:lessonService
) {
}
恩戈尼尼特（）{
this.manPicturePath=MAN\u PICTURE\u路径；
this.activatedRoute.data.subscribe（{boxer}）=>{
this.boxer=boxer；
});
这是我们的服务
.query（{boxerID:this.boxer.id}，this.versementService.BY\u boxer\u id）
.订阅(
（res:HttpResponse）=>this.fetchVersementsDatas（res.body），
（err:HttpErrorResponse）=>this.jhalertError（err）
);
这是莱森服务
.query（{boxerID:this.boxer.id}，this.lessonService.BY\u boxer\u id）
.订阅(
（res:HttpResponse）=>this.fetchLessonsDatas（res.body），
（err:HttpErrorResponse）=>this.jhalertError（err）
);
}
fetchLessonsDatas（课程）{
this.lessons=of（课程）；
}
fetchVersementsDatas（versements？：版本[]）{
this.versements=of（versements）；
}
JHIALERTERERROR（错误消息：任何）{
this.jhiAlertService.error（errorMessage，null，null）；
}
字节大小（字段：任意）{
返回此.dataUtils.byteSize（字段）；
}
openFile（contentType:any，field:any）{
返回这个.dataUtils.openFile（contentType，field）；
}
先前状态（）{
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

core.js？f18e:6014错误：未捕获（承诺中）：错误：模板解析错误：
无法绑定到'ngForIn'，因为它不是'li'的已知属性。（“>0”>les 3 derniere课程
]*ngFor=“让课程进入（课程异步）|切片：0:3；let i=index”class=“列表组项目d-flex jus”）：ng:///BoxingBoxerModule/BoxerDetailComponent。html@0:1790
嵌入模板上的任何指令都不使用属性绑定ngForIn。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。（“Nth>0”>les 3 derniere课程
[ERROR->]”li*ngFor=“让课程进入（课程异步）|切片：0:3；let i=index”class=“list group item d-flex”）：ng:///BoxingBoxerModule/BoxerDetailComponent。html@0:1786
分析器错误：ng:///BoxingBoxerModule/BoxerDetailComponent中表达式[{{versement.montant？}}}:{{{versement.date | date:'short'}}结尾处的表达式：{{versement.montant？}}}}:{{versement.date | date:'short'}}意外结束。html@0：2622（“.id，'view']”>{{{i}}[错误->]{{{versement.montant？}}}{{versement.date | date:'short'}/ul>les 3 derniere versements
]*ngFor=“let versement in（versement | async）| slice:0:3；let i=index”class=“list group item d-f”）：ng:///BoxingBoxerModule。html@0:2310
嵌入模板上的任何指令都不使用属性绑定ngForIn。请确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中（“h>0”>les 3 Dernier versements
[错误->]要进行迭代，需要使用以下语法
*ngFor=“let value of values”
：

<li *ngFor="let versement of (versements | async ) | slice:0:3; let i=index">
...
</li>

<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>