Angular 6 - Как отправить одну область формы (но не всю форму) - PullRequest
Новая
       14

Angular 6 - Как отправить одну область формы (но не всю форму)

0 голосов
/ 13 марта 2019

Я пытаюсь отправить отдельные области HTML-страницы, когда пользователь нажимает кнопку «Сохранить».Страница html состоит из ряда задач, которые можно редактировать, когда пользователь нажимает кнопку сохранения, я хочу, чтобы отдельная задача была отправлена ​​на сервер, т.е. не все задачи на сервер.Каков наилучший способ сделать это.Ниже мой код: -

HTML: - 

<mat-accordion multi="true">
  <div class="task-element" *ngFor="let task of selectedDayTasks">
    <div class="expansion-panel">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-form-field class="title-box">
            <input matInput 
              value="{{ task.title }}">
          </mat-form-field>
            <!--{{ task.title }}-->
        </mat-expansion-panel-header>
        <mat-form-field class="description-box">
          <textarea matInput value="[(task.description)]"></textarea>
        </mat-form-field>
        <!--<p>{{ task.description }}</p>-->
        <mat-action-row>
          <button mat-button color="warn" (click)="onSave(task._id, task.title, task.description, task.complete, task.day)">SAVE</button>
        </mat-action-row>
      </mat-expansion-panel>
    </div>
    <div class="done-button">
      <button class="green-btn" *ngIf="task.complete" (click)="taskStateChange(task._id)" mat-fab>YES</button>
      <button *ngIf="!task.complete" (click)="taskStateChange(task._id)" color="warn" mat-fab>NO</button>
    </div>
  </div>
</mat-accordion>

Task.component.ts: - 

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

import { Task} from './task.model';
import { DailyTaskService } from './daily-task.service';

@Component({
  selector: 'app-daily-tasks',
  templateUrl: './daily-tasks.component.html',
  styleUrls: ['./daily-tasks.component.css']
})
export class DailyTasksComponent implements OnInit, OnChanges {

  @Input() selectedDay: string;

  tasks: Task[] = [];
  selectedDayTasks: Task[] = [];

  constructor(public dailyTaskService: DailyTaskService) {}

  ngOnInit() {


    this.dailyTaskService.getTasks()
      .subscribe(taskData => {
        this.tasks = taskData;

        this.tasks.forEach((task)=>  {
          if (task.day == 'Monday') {
            this.selectedDayTasks.push(task);
          }
        });
      });
  }

  onSave(_id: number, title: string, description: string, complete: boolean, day: string ) {
    this.dailyTaskService.updateTask(
      _id,
      title,
      description,
      complete,
      day
    );
  }
}

1 Ответ

0 голосов
/ 15 марта 2019

Я разобрался, мне нужно было использовать [(ngModel)], т.е. - 

<input matInput [(ngModel)] = {{task.title}}">
...