показать значение на HTML-странице с моделью после создания, что

Question

Мне нужно, чтобы показать информацию в формате HTML.

Моя информация имеет 2 части:

Часть первая: передавайте локальную информацию (не отправляйте запрос с сервера)

Часть вторая . Возможно, потребуется отправить идентификатор, получить информацию и показать ее в формате HTML.

Когда я нажимаю, чтобы показать подробную информацию, он показывает мне первую часть в html, а часть буксировки равна нулю, потому что модель заполнения после создания 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>

javascript angular typescript

1

kianoush dortaj 28 Окт 2019 в 13:45

Answer 1

Вы можете добавить html ниже части, которой вы поделились, например:

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

Это будет отображаться только тогда, когда parentModel имеет данные

1

The Fabio 28 Окт 2019 в 11:06

Answer 2

Вы можете сохранить свойство класса компонента isPart2Available и инициализировать его как false.

После того как вы отправите запрос на сервер, чтобы получить подробности по части 2, и после того, как запрос будет выполнен, вы можете изменить isPart2Available на true.

Этот isPart2Available может использоваться в вашем шаблоне, чтобы показать или скрыть часть 2 как

<div class="part@Container" *ngIf="isPart2Available">
    //your part 2
</div>

Это обеспечит видимость части 2 только при наличии данных.

1

Saksham 28 Окт 2019 в 10:59

Answer 3

Я сделал так, что вы можете обратиться и решить вашу проблему.

Есть две части в угловых всплывающих окнах / модальных материалах, чтобы справиться с этим согласно моему удобству.

Откройте модал / всплывающее окно
Подпишитесь на модальные изменения с того места, где вы открылись.

Открытие модального и подписка

openFunctionPopup() {                      
        const dialogRef = this.dialog.open(OpenFunctionPopupComponent, {
            width: '50%',
            height: '80%',
            disableClose: true,
            data: {name: 'test'}
        });

        dialogRef.afterClosed().subscribe((result) => {
            // console.log(result);
        });
 }

Добавьте компонент в файл app.module.ts следующим образом

import {ModalService} from './Components/ModalService.component';
declarations: [
.
.
.,
ModalService
],
entryComponents: [
.
.
.,
ModalService
]

Внутри модальной

<mat-dialog-actions>
    <div class="loadFromData">
        <span>{{name}}</span>
    </div>
    <div class="loadFromAPI">
        <span>{{age}}</span>
    </div>
    <button mat-button (click)="keepLoggedIn()">Keep me logged in</button>
    <button mat-button (click)="logout()">Log out</button>
    </mat-dialog-actions>

constructor(public dialogRef: MatDialogRef<OpenFunctionPopupComponent>, 
               private api: ApiService) {
}

ngOnInit() {
   this.name = this.data.;
}

getDataFromApi() {
  const endpoint = 'api=test&p=template';
  const seq = this.api.get(endpoint, body);
  seq.subscribe((res: any) => {
       this.age= res.age;
  }, (err) => {

  },
  () => {

   });
}

logout() {
    this.dialogRef.close({data:[], status: 'success'});
}

keepLoggedIn() {
    this.dialogRef.close({data:[], status: 'success'});
}

1

sibabrat swain 28 Окт 2019 в 11:49

показать значение на HTML-странице с моделью после создания, что

3 ответа

Похожие вопросы

Новые вопросы

javascript