Question

我在[(ngModel)]中显示了从服务器接收到的数据，但是由于它们没有立即出现，因此多次出现此错误：“错误TypeError：无法读取未定义的属性'title'。然后，我的数据显示在输入字段中。

如何仅在收到数据时显示数据？

模板：

<form [formGroup]="angFormEd" novalidate>

        <input type="text" class="form-control" formControlName="titleEd"  #titleEd
               [(ngModel)]="post.title"/>

        <input type="url" class="form-control" formControlName="urlEd" #urlEd pattern="https?://.+"
               title="Include http://" [(ngModel)]="post.url"/>
 
        <button (click)="updatePost(titleEd.value, urlEd.value)"  
                [disabled]=" angFormEd.invalid">
                btn btn-primary">Update Post</button>     
    </form>

组件：

export class GalleryEditComponent implements OnInit {
    post: Picture;
    constructor(private fb: FormBuilder,
                private route: ActivatedRoute, private galleryService: GalleryService) {
    }

    ngOnInit() {
        this.editPost();
    }

    editPost(): void {
        this.route.params.subscribe(params => {
            this.galleryService.edit(params['id']).subscribe(res => {
                this.post = res;
            })
        })
    }

Answer 1

您正在混合使用“模板驱动形式”和“反应形式”。

@Angular

支持使用ngModel输入属性和ngModelChange事件 Angular v6中不推荐使用带有反应形式指令的将在Angular v7中删除。

要么去patchValue()要么去setValue()
Updating Angular Forms with patchValue or setValue

editPost(): void {
        this.route.params.subscribe(params => {
            this.galleryService.edit(params['id']).subscribe(res => {
                this.post = res;
                this.angFormEd.setValue({titleEd:res.title,urlEd:res.url})
            })
        })
    }

Answer 2

您可以在输入中添加诸如*ngIf="post.url"之类的条件，以使其仅在加载时显示

如何延迟在[（ngModel）]中获取数据？

2 个答案: