Tajuk ditulis semula sebagai: Div saya atau datanya tidak dipaparkan dengan betul dengan arahan ngFor

Question

Saya mencipta perkhidmatan dalam komponen saya yang saya langgan, tetapi apabila saya menggunakan ngFor, div tidak dipaparkan sama sekali.

Fail Komponen.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)
  //   }
  // }

}

Fail komponen.html

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

Data muncul dalam console.log saya tetapi tidak dipaparkan sama sekali pada kad. Tolong bantu, terima kasih!

Saya cuba menambah tatasusunan dummy dalam fail ts dan mencetaknya ke log konsol, tetapi ia masih tidak dipaparkan dalam div.

Answer 1

Anda boleh memuatkan rancangan anda secara tidak segerak.

1. Buat objek yang boleh diperhatikan public plans$: Observable<any>

2. Tetapkan langganan anda this.plans$ = this.service.getPlans();

3. Paparan bersyarat dalam HTML anda

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