Angular: проблема с привязкой данных в форме редактирования - PullRequest
Новая
       7

Angular: проблема с привязкой данных в форме редактирования

0 голосов
/ 25 апреля 2020

Я создаю форму редактирования, которая должна заполнять поля ввода при инициализации.

Это файл компонента ts. 

import { Component, OnInit, HostBinding } from '@angular/core';
import { Collection } from 'src/app/models/collection';
import { CollectionsService } from '../../services/collections.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-collection-form',
  templateUrl: './collection-form.component.html',
  styleUrls: ['./collection-form.component.css']
})
export class CollectionFormComponent implements OnInit {

  @HostBinding('class') classes = 'row';

  cta: string; // Form CTA text

  collection: Collection = {
    Name: '',
    Description: ''
  };

  edit: boolean = false;

  constructor(private collectionsService: CollectionsService, private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.cta = 'Add collection';
    const params = this.activatedRoute.snapshot.params;
    if(params.id) {
      this.cta = 'Edit collection';
      this.collectionsService.getCollection(params.id)
        .subscribe(
          res => {
            this.collection = res;
            this.edit = true;
          },
          err => console.log(err)
        )
    }
  }

Это файл компонента html: 

<div class="col-md-8 offset-md-2">
    <div class="card">
        <div class="card-body">
            <form ngForm>
                <div class="form-group">
                    <input type="text" name="name" [(ngModel)]="collection.Name" placeholder="Collection name" class="form-control" autofocus>
                </div>
                <div class="form-group">
                    <textarea name="description" [(ngModel)]="collection.Description" placeholder="Collection description" rows="2" class="form-control"></textarea>
                </div>
                <button class="btn btn-success btn-block" (click)="createNewCollection()">{{cta}}</button>
            </form>
        </div>
    </div>
</div>

Это модель данных: 

export interface Collection {

    Name?: string,
    Description?: string,
    OwnerID?: number

};

Путь к форме редактирования: collection / edit /: id . Когда я перехожу на этот URL, я вижу в консоли браузера, что данные выбираются правильно. Однако мне не удается отобразить его в соответствующих полях ввода.

Кстати, метод POST работает отлично.

Я использую Angular 9.1.3.

1 Ответ

0 голосов
/ 25 апреля 2020 
this.activatedRoute.params.subscribe((params) => {
if(params.id) {
      this.cta = 'Edit collection';
      this.collectionsService.getCollection(params.id)
        .subscribe(
          res => {
            this.collection = res;
            this.edit = true;
          },
          err => console.log(err)
        )
    }
})
...