不能將對象之間的數據綁定到模式

我試圖綁定數據模式之間的內容是一種形式來編輯數據。我正在使用ng-model指令，但組件中的對象不與數據綁定。我想綁定表單的數據，然後創建一個表示表單數據的對象的實例，以提交它。不能將對象之間的數據綁定到模式

組件：

import { Component, OnInit, TemplateRef } from '@angular/core'; 
import { BookInterface } from './book'; 
import { BookService } from './book.service'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; 
import { BookClass } from './book-class'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: 'books-list.component.html', 
    styleUrls: ['books-list.component.css'] 
}) 

export class BookListComponent implements OnInit { 
    pageTitle: string = 'Book List'; 
    imageWidth: number = 100; 
    imageMargin: number = 2; 
    listFilter: string; 
    errorMessage: string; 
    book = new BookClass(0, "", "", new Date("February 4, 2016 10:13:00"), ""); 
    books: BookInterface[]; 
    public modalRef: BsModalRef; 

    constructor(private _bookService: BookService, private modalService: 
    BsModalService) { 

    } 
    ngOnInit(): void { 
    this._bookService.getBooks() 
     .subscribe(books => this.books = books, 
     error => this.errorMessage = <any>error); 
    } 
    public openModal(template: TemplateRef<any>) { 
    this.modalRef = this.modalService.show(template); 
    } 

    onSubmit(): void { 
    this._bookService.editBook(this.book); 
    } 
    // TODO: Remove this when we're done 
    get diagnostic() { return JSON.stringify(this.book); } 

}

模式：

<ng-template #template> 
    <div class="modal-header"> 
    <h4 class="modal-title pull-left">Modal</h4> 
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <h1>Book Edit</h1> 
    {{diagnostic}} 
    <form (ngSubmit)="onSubmit()" #bookForm="ngForm"> 
     <div class="form-group"> 
     <input type="hidden" class="form-control" id="bookId" name="bookId" [(ngModel)]="book.bookId"> 
     </div> 
     <div class="form-group"> 
     <input type="hidden" class="form-control" id="imageUrl" name="imageUrl" [(ngModel)]="book.imageUrl"> 
     </div> 
     <div class="form-group"> 
     <label for="title">Book Title</label> 
     <input type="text" class="form-control" id="bookTitle" name="bookTitle" [(ngModel)]="book.bookTitle" #bookT="ngModel" required> 
     <div *ngIf="bookT.invalid" class="alert alert-danger"> 
      <div *ngIf="bookT.errors.required"> 
      Book Title is required. 
      </div> 
     </div> 
     </div> 
    </form> 
    </div> 
</ng-template>

來源

2017-09-06 NB88

這是一個懶惰加載模板的模態？也許使用'async'可能會有所幫助。這是否符合你的問題？ https://stackoverflow.com/questions/42878506/angular-2-passing-html-to-ng-content-with-bindings – Guntram

爲了所有的表單控件值綁定到你的表單對象即bookForm，你必須使用formControlName或name屬性爲每個表單控件。對象無法綁定到模型，在使用NgModel的情況下。

<input type="hidden" class="form-control" id="bookId" name="bookId">

當訪問在形式）的形式提交方法的onSubmit（，這是可以做到爲：

this.form.value

的JSON結構爲表單對象將是：

this.form.value => { bookId: '#a213", imageUrl: 'http://www.example.com/a1', bookTitle: 'A Song of Ice and Fire'}

其然後您可以通過POST請求進行串聯和發送。

來源

2017-09-07 06:14:42 Malhar

不能將對象之間的數據綁定到模式

回答

相關問題