Saya perlu menampilkan informasi dalam html.

Informasi saya memiliki 2 bagian:

Bagian Satu : meneruskan informasi dari lokal (tidak mengirim permintaan dari server)

Bagian Kedua : mungkin perlu mengirimkan id dan mendapatkan informasi dan menampilkannya dalam html .

Ketika saya mengklik untuk menampilkan detail informasi itu menunjukkan kepada saya bagian satu di html dan bagian derek adalah nol, karena mengisi model setelah membuat html.

bagaimana cara menampilkan Part two ketika model diisi setelah membuat html atau cara lain untuk menampilkan Part two?????

Ini kode ts saya :

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();
  }

}

Pembaruan :

    <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 Oktober 2019, 13:45

3 jawaban

Jawaban Terbaik

Anda dapat menambahkan beberapa html di bawah bagian yang telah Anda bagikan, seperti ini:

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

Ini hanya akan ditampilkan setelah parentModel memiliki data

1
The Fabio 28 Oktober 2019, 11:06

Saya telah melakukan seperti ini, Anda dapat merujuk dan menyelesaikan masalah Anda.

Ada dua bagian dalam popup/modal bahan sudut untuk menanganinya sesuai kenyamanan saya.

  1. Buka modal/popup
  2. Berlangganan perubahan modal dari tempat Anda membuka.

Membuka modal dan berlangganan

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

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

Tambahkan komponen dalam file app.module.ts seperti ini

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

Di dalam 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 Oktober 2019, 11:49

Anda dapat mempertahankan properti kelas komponen isPart2Available dan menginisialisasinya sebagai salah.

Setelah Anda mengirim permintaan ke server untuk mendapatkan detail bagian 2 dan setelah permintaan terpenuhi, Anda dapat mengubah isPart2Available menjadi true.

isPart2Available ini dapat digunakan di template Anda untuk menampilkan atau menyembunyikan bagian 2 sebagai

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

Ini akan memastikan bahwa bagian 2 hanya terlihat saat data tersedia.

1
Saksham 28 Oktober 2019, 10:59