javascript - 创建后在带有模型的 html 页面中显示值

Question

我需要在 html 中显示信息。

我的信息有两部分:

第一部分:从本地传递信息(不是从服务器发送请求)

第二部分:可能需要发送id并获取信息并以html显示。

当我单击以显示信息的详细信息时，它会显示 html 中的第一部分，而第二部分为空，因为在创建 html 后填充模型。

创建 html 或以任何方式显示第二部分后填充模型时如何显示第二部分？？？？？

这是我的 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>

Answer 1

您可以在分享的部分下方添加一些html，如下所示:

<div *ngIf="parentModel" >
 <!-- Your Part 2 goes here -->
</div>

这只会在 parentModel 有数据时显示