Question

我有一个父组件，它调用REST api来获取配置文件（JSON）数据。父组件使用input（array）将此数据传递给子组件以创建动态表单（输入字段）。已成功创建所有字段。表单使用API post将数据保存到DB。问题：如果用户导航到主页并返回到配置文件动态表单，则数据值将在保存之前显示数据版本（旧版本的数据）。如果我刷新屏幕，那么我可以获得正确的数据。再次加载表单时，视图尚未更新。我检查了日志，并且返回的JSON数据已更新，但表单正在获取以前版本的值。

父Html

 <df-profile [profileData]="profileData"></df-profile>

父组件

import { Component, ChangeDetectorRef, Input, OnInit} from '@angular/core';
import { Http } from '@angular/http';
import { Router } from '@angular/router';

import { AuthenticationService, UserService } from '../services/index';
import { ProfileModel } from '../models/index';

@Component({
    moduleId: module.id,
    selector: 'user-profile',
    templateUrl: 'user.profile.component.html'
})
export class UserProfileComponent implements OnInit {

    profileData: ProfileModel[] = [];
    public isDataAvailable: boolean = false;

    constructor(
        public router: Router,
        private userService: UserService,
         private authenticationService: AuthenticationService,
    ) {}

    ngOnInit() {
        console.info("Starting GameDay Component ngOnInit ... ...");
        console.info(this.authenticationService.isLoggedIn());
        if (this.authenticationService.isLoggedIn()) {
            this.getData().then(() => this.isDataAvailable = true);
        } else {
            this.authenticationService.logout();
        }

    }    

    getData(): Promise<ProfileModel<any>[]> {
        return this.userService.get.profile().then(data => {
            this.profileData = data[0]['profileList'];
        });
    }
}

Child Dynamic Form Html

 <form (ngSubmit)="form.valid && onSubmit()" [formGroup]="form">
        <div class="kode-team-match" *ngFor="let item of profileData">
            <ul>
                <li class="home-kode-field"><df-field [field]="item.field" [form]="form"></df-field></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <div class="col-md-12" style="text-align:center;">
                <button type="submit" [disabled]="loading" class="kode-modren-btn thbg-colortwo"> Salvar</button>
            </div>
        </div>
    </form>
    <div *ngIf="payLoad" class="form-row">
        <strong>Saved the following values</strong><br>{{payLoad}}
    </div>

儿童动态表单组件

import { Component, Input, ChangeDetectorRef, OnInit }  from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AuthenticationService, UserService } from '../services/index';

@Component({
    moduleId: module.id,
    selector: 'df-profile ',
    templateUrl: 'profile.form.component.html',
    providers: [ProfileControlService]
})
export class ProfileFormComponent implements OnInit {

    @Input() profileData: ProfileModel[];
    form: FormGroup;
    payLoad = '';

    constructor(
        private pcs: ProfileControlService,
    ) {
        this.profileData = [];
    }

    ngOnInit() {
        //console.log('Starting form component ... ...');
        this.form = this.pcs.toFormGroup(this.profileData); 
    }

    onSubmit() {
        this.userService.saveUserProfile(array)
        .subscribe(result => {
            this.isFailed = result;
            if (result === true) {
                this.service.success(this.translate.instant('register login'), this.translate.instant('register success'));
            } else {
                this.error = this.userService.errorMessage;
            }
            this.loading = false;
        });
    }
}

我很难在这里看到我做错了什么。有人可以帮忙吗？我不知道是否需要调用变更检测以及在哪里。

Angular2 Typescript查看保存更改后不更新数据并更新数组（模型）

0 个答案: