Tajuk ditulis semula sebagai: Div saya atau datanya tidak dipaparkan dengan betul dengan arahan ngFor
P粉450744515
P粉450744515 2023-09-06 21:15:27
0
1
353

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.

P粉450744515
P粉450744515

membalas semua (1)
P粉785522400

Anda boleh memuatkan rancangan anda secara tidak segerak.

  1. Buat objek yang boleh diperhatikanpublic plans$: Observable

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

  3. Paparan bersyarat dalam HTML anda

 
{{ plan | json }}
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!