我需要在html中显示信息。
我的信息有2部分:
第一部分:通过本地传递信息(不发送来自服务器的请求)
第二部分:也许需要发送ID并获取信息并以html形式显示。
当我单击以显示详细信息时,它在html中显示了第一部分,而tow部分为空,这是因为在创建html之后填充模型。
Part two
创建html后如何显示模型何时被填充或如何显示Part two
?????
这是我的ts代码:
export interface DetailModel {
commentText: string;
createdByRefId: number;
createdDateTimePersian: string;
createdOnUtc: string;
createdUserFullName: string;
id: number;
likeCount: number;
parentId: number;
postId: number;
postTitle: string;
published: boolean;
updatedByRefId: number;
updatedDateTimePersian: string;
updatedOnUtc: string;
updatedUserFullName: string;
}
@Component({
selector: 'kt-detail-comment',
templateUrl: './detail-comment.component.html',
styleUrls: ['./detail-comment.component.scss']
})
export class DetailCommentComponent implements OnInit {
parentComment: CommentEdit;
childModel: DetailModel = {} as DetailModel;
parentModel: DetailModel = {} as DetailModel;
constructor(
@Inject(MAT_DIALOG_DATA) public data: CommentDetail,
private defChange: ChangeDetectorRef,
private dialogRef: MatDialogRef<DetailCommentComponent>,
private shredService: SharedService) {
this.childModel = this.data.data;
if (this.childModel.parentId != null) {
this.fetchData(this.data.data.parentId);
}
}
ngOnInit(): void {
}
fetchData(id: number): void {
this.shredService.commentGetOne(id).subscribe(data => {
this.parentModel = data;
});
}
close(): void {
this.dialogRef.close();
}
}
更新:
<div class=" col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0">
<div class="topbar col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12mb-3">
<span (click)="close()">
<i class="fas fa-times"></i>
</span>
<div class="detail-title">
<label>جزئیات</label>
</div>
</div>
<div class=" mian-content form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
<div *ngFor="let item of globalModel;let i=index"
class="form-group justify-content-start col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2">
<div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
<label><strong>{{item.name | translate }} </strong></label>
</div>
<div *ngIf="!item.isDate && !item.isBoolean && !item.isImage"
class="showMore col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl form-group col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0" [id]="'lbl'+i">
<div class="spanArea col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12" [id]="'spanArea'+i">
{{item.value}}
</div>
<div (click)="More(i)" [id]="'showMoreBtn'+i"
class="showMoreBtn hiddenShowMore text-center col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-3">
Read More
</div>
</label>
</div>
<div *ngIf="item.isBoolean" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span> <i class="fa fa-check-circle ic-green"></i></span>
</label>
<label class="lbl" *ngIf="!item.value && !item.isDate">
<span> <i class="fa fa-ban ic-red"></i> </span>
</label>
</div>
<div *ngIf="item.isImage" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl" *ngIf="item.value && !item.isDate">
<span (click)="openDialog(item.value)" class="show-img-box">
<i class="fa fa-search"></i>
{{'POST.PREVIEW' | translate}}
</span>
</label>
</div>
<div *ngIf="item.isDate" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
<label class="lbl"
*ngIf="item.isDate && lang!=='fa'"><span>{{item.value | date: 'dd/MM/yyyy hh:mm'}}</span></label>
<label class="lbl" *ngIf="item.isDate && lang==='fa'"><span>{{ item.value | jalali }}</span> </label>
</div>
</div>
</div>
<div *ngIf="showMore"
class="buttonShow form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
<div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
</div>
<div class="btnShow col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9">
<button mat-button color="primary" (click)="published()">{{'DIALOG_PREVIEW.SKIP' | translate}}</button>
<button mat-raised-button color="accent"
(click)="published()">{{'DIALOG_PREVIEW.PUBLISH' | translate}}</button>
</div>
</div>
</div>
您可以在共享的部分下方添加一些html,如下所示:
<div *ngIf="parentModel" >
<!-- Your Part 2 goes here -->
</div>
仅在parentModel
有数据时显示
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句