Titel umgeschrieben als: Mein Div oder seine Daten werden mit der ngFor-Direktive nicht korrekt gerendert
P粉450744515
P粉450744515 2023-09-06 21:15:27
0
1
352

Ich habe in meiner Komponente einen Dienst erstellt, den ich abonniere, aber wenn ich ngFor verwende, wird das Div überhaupt nicht gerendert.

Component.TS-Datei

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) // } // } }

Component.html-Datei

{{plan.title}}

Die Daten werden in meinem console.log angezeigt, werden aber überhaupt nicht auf der Karte gerendert. Bitte helfen Sie, danke!

Ich habe versucht, der TS-Datei ein Dummy-Array hinzuzufügen und es im Konsolenprotokoll zu drucken, aber es wird immer noch nicht im Div gerendert.

P粉450744515
P粉450744515

Antworte allen (1)
P粉785522400

您可以异步加载您的计划。

  1. 创建一个可观察对象public plans$: Observable

  2. 分配您的订阅this.plans$ = this.service.getPlans();

  3. 在您的HTML中有条件地渲染

 
{{ plan | json }}
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!