Necesito mostrar información en html.

Mi información tiene 2 partes:

Primera parte: pasar el formulario de información local (no enviar una solicitud desde el servidor)

Parte dos: tal vez necesite enviar una identificación y obtener información y mostrarla en html.

Cuando hago clic para mostrar el detalle de la información, me muestra la primera parte en html y la parte de remolque es nula, porque llene el modelo después de crear el html.

¿cómo puedo mostrar Part two cuando el modelo se llena después de crear el html o cualquier forma de mostrar Part two ?????

Este es mi código 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();
  }

}

Actualización:

    <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>
1
kianoush dortaj 28 oct. 2019 a las 13:45

3 respuestas

La mejor respuesta

Puede agregar algunos html debajo de la parte que ha compartido, como esta:

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

Esto solo se mostrará una vez que parentModel tenga datos

1
The Fabio 28 oct. 2019 a las 11:06

Puede mantener una propiedad de clase de componente isPart2Available e inicializarla como falsa.

Una vez que envíe una solicitud al servidor para obtener detalles de la parte 2 y una vez que la solicitud se haya completado, puede cambiar isPart2Available a verdadero.

Este isPart2Available se puede usar en su plantilla para mostrar u ocultar la parte 2 como

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

Esto asegurará que la parte 2 sea visible solo cuando haya datos disponibles.

1
Saksham 28 oct. 2019 a las 10:59

He hecho esto, puedes referir y resolver tu problema.

Hay dos partes en ventanas emergentes / modales de material angular para manejarlo según mi conveniencia.

  1. Abra el modal / ventana emergente
  2. Suscríbete a los cambios modales desde donde has abierto.

Apertura de la modal y suscripción.

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

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

Agregue el componente en el archivo app.module.ts como este

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

Dentro del modal

<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 oct. 2019 a las 11:49