角2 ngModel形式知道新的選擇

允許採取這種形式：角2 ngModel形式知道新的選擇

<form name="setQuestions_form" (ngSubmit)="set_questions()"> 
    <ng-select [multiple]="true" [options]="questions" [(ngModel)]="selectedQuestions" name="selectedQuestions"></ng-select> 
    <button>send</button> 
</form>

selectedQuestions是問題的數組：

selectedQuestions: Question[] = [];

方法set_questions將數據發送給後端：

this.questionService.create(this.selectedQuestions).subscribe();

所以我的數據庫第一次是空的，但第二次我已經保存了問題（可以定製編輯與其他功能，所以我不希望他們被刪除或更改），什麼方式在數據庫中插入只有選擇的新問題？在Angular 2中有任何東西可以在選擇中瞭解新的選項，或者我應該在後端進行工作，將保存的問題與新的問題進行比較？

例子：

[ ] Question 1 
[X] Question 2 
[X] Question 3 
[ ] Question 4 

[ ] Question 1 
[ ] Question 2 
[X] Question 3 
[X] Question 4

在這裏，我想知道的問題2已經被移除，該問題4已經加入，我不與不變的人關心，所以我可以發送給後端的東西像這樣：

- Added: Question 4 
- Removed: Question 2

忽略問題1和問題3（即已經被選中，但不是一個新的）

來源

2017-08-03 PriNcee

所以'questions'，你必須從以前的用戶提交的問題，你想，當用戶選擇了新的且尚未在數據庫中知道嗎？ –

用戶可以從選擇組件添加或刪除問題，所以我只想知道新的或刪除的問題。我不知道Angular 2中是否有簡化此任務的東西 – PriNcee

沒有可以跟蹤它們的Angular功能，因此您必須實現它。我建議你看一下'ngOnChanges'事件，它是Angular生命週期的一部分，或者將'onChange'事件添加到'ng-select'並創建邏輯當用戶選擇或取消選擇一個選項時會發生什麼。你將需要一個更多的數組來跟蹤選定的人和他未選中的人，然後將它與你從數據庫中獲得的人進行比較。 –

這裏的例如與MD-複選框，多select.html：

<div> 
    <md-checkbox name="Q1" (change)="onCheckChange($event)">Question 1</md-checkbox> 
    <md-checkbox name="Q2" (change)="onCheckChange($event)">Question 2</md-checkbox> 
    <md-checkbox name="Q3" (change)="onCheckChange($event)">Question 3</md-checkbox> 
    <md-checkbox name="Q4" (change)="onCheckChange($event)">Question 4</md-checkbox> 
</div>

而且這裏的組件多select.ts：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'multi-select', 
    templateUrl: 'multi-select.html' 
}) 

export class MultiSelect implements OnInit { 
    constructor() { } 

    ngOnInit() { } 

    onCheckChange($event) { 
     //console.log($event); 
     console.log($event.source.name,"=",$event.checked); 
    } 
}

原因是有import { MdCheckboxModule } from '@angular/material';，並在進口領域中的條目相應的模塊。的執行console.log則是：

Q4 = true 
Q2 = false

來源

2017-08-04 18:16:57 Myonara

角2 ngModel形式知道新的選擇

回答

相關問題