Titre réécrit comme : Mon div ou ses données ne s'affichent pas correctement avec la directive ngFor

Question

J'ai créé un service dans mon composant auquel je suis abonné, mais lorsque j'utilise ngFor, le div ne s'affiche pas du tout.

Fichier Component.TS

import { Component, OnInit } from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';
import { PlansService } from 'src/app/services/plans.service';


interface JobType {
  value: string;
  viewValue: string;
}

interface WorkEnv {
  value: string;
  viewValue: string;
}


@Component({
  selector: 'app-post-job',
  templateUrl: './post-job.component.html',
  styleUrls: ['./post-job.component.css']
})

export class PostJobComponent implements OnInit {

  jobTypes: JobType[] = [
    {value: 'type-0', viewValue: '全职'},
    {value: 'type-1', viewValue: '兼职'},
    {value: 'type-2', viewValue: '自由职业'},
 
  ];

  workEnvs: WorkEnv[] = [
    {value: 'type-0', viewValue: '远程'},
    {value: 'type-1', viewValue: '混合'},
    {value: 'type-2', viewValue: '现场'},
 
  ];

  jobForm = this.fb.group({ 

    jobTitle: this.fb.group({
      title: ['', [Validators.required, Validators.minLength(2), Validators.pattern('^[_A-z0-9]*((-|\s)*[_A-z0-9])*$')]],
      jobType: ['', [Validators.required]]
    }),

   })

   plans: any;
  
  constructor(private fb: FormBuilder, private service:PlansService) {
   }

  ngOnInit(): void {

    this.service.getPlans()
      .subscribe(response => {
        this.plans = response;
        console.log(response);
      });
    
  }



   // Getter method to access formcontrols
   get myForm() {
    return this.jobForm.controls;
  }

 
  // Submit Registration Form
  // onSubmit() {
  //   this.submitted = true;
  //   if(!this.jobForm.valid) {
  //     alert('Please fill all the required fields to create a super hero!')
      
  //   } else {
  //     console.log(this.jobForm.value)
  //   }
  // }

}

Fichier Component.html

<div class="subscription-container" >
  <div class="card" *ngFor="let plan of plans " >
      <h1>{{plan.title}}</h1>
  </div>
</div>

Les données apparaissent dans mon console.log mais ne s'affichent pas du tout sur la carte. S'il vous plaît, aidez-moi, merci !

J'ai essayé d'ajouter un tableau factice dans le fichier ts et de l'imprimer dans le journal de la console, mais il ne s'affiche toujours pas dans le div.

Answer 1

Vous pouvez charger vos plans de manière asynchrone.

1. Créer un objet observable public plans$: Observable<any>

2. Attribuez votre abonnement this.plans$ = this.service.getPlans();

3. Rendu conditionnellement dans votre HTML

<ng-container *ngIf="plans$ | async as plans">
 <div *ngFor="let plan of plans">
  {{ plan | json }} 
 </div>
</ng-container>