観察可能になると、まだ角度が快適ではないので、自分自身を訓練しています
私はボクシングクラブを管理する小さなアプリを書いています
現在選択されているボクサーの最後の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
繰り返すには、次の構文を使用する必要があります*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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加