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
{{plan.title}}
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.
Anda boleh memuatkan rancangan anda secara tidak segerak.
Buat objek yang boleh diperhatikan
public plans$: Observable
Tetapkan langganan anda
this.plans$ = this.service.getPlans();
Paparan bersyarat dalam HTML anda