Как собрать и отправить данные в JSON?

Question

[Анатолий Кучин]

Добрый день. Есть приложение на Angular. Я принимаю данные из api в JSON. Нужно сделать так, чтобы при нажатии кнопки, собирать данные по всем тэгам и отправлять.

import { Component, OnInit, Input, Output, Inject } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  template: `
    <div id="services" class="scrollto clearfix">
      <div class="row no-padding-bottom clearfix">
          <div class="col-3" *ngIf="dataLoaded">
            <app-first-name [data]="data.firstname"></app-first-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-second-name [data]="data.lastname"></app-second-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-patronymic-name [data]="data.middlename"></app-patronymic-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-datepicker [data]="data.birth_date"></app-datepicker>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-login-name [data]="data.login"></app-login-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-main-position [data]="data.position_name"></app-main-position>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-radio-sex [data]="data.sex"></app-radio-sex>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-personnel-number [data]="data.service_number"></app-personnel-number>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-state-name [data]="data.current_state"></app-state-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-date-of-entry [data]="data.hire_date"></app-date-of-entry>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <app-subdivision-name [data]="data.unit"></app-subdivision-name>
          </div>
          <div class="col-3" *ngIf="dataLoaded">
            <button mat-button (click)="getMe(1)">Отправить</button>
          </div>
        </div>
      </div>
            `
})

export class HomeComponent implements OnInit {

  data: string[];
  dataLoaded:boolean = false;
  HttpClient: any;
  constructor( private http: HttpClient ) {}

  getMe( param ) {
    this.http.post('http://as-msk-n7057:8101/api/angular/v1/$.html', {
      func: 'getme'
    })
    .subscribe(
      (data:any) => {
        this.data = data[0] as string[];
        this.dataLoaded = true;
        console.log(data, param);
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );
  }

  ngOnInit() {
    this.http.get('http://xxxxxxx/api/angular/v1/$.html?func=getme').subscribe(
      data => {
        this.data = data[0] as string[];
        this.dataLoaded = true;
        console.log(data);
        //return this.http.post('http://xxxxx/api/angular/v1/$.html?func=getme',data);
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );
  }
}

Comments

[Владимир Скибин]

Так а проблема в чем?

[Анатолий Кучин]

Владимир Скибин, Нужно собрать все компоненты при нажатии кнопки и вывести в консоль.

Answer 1

[Антон Швец]

На данный момент у вас компоненты ничего не возвращают, поэтому собрать с них ничего нельзя.
Что внутри компонентов? Если там есть Output надо его использовать.

Вообще оборачивать каждую мелочь в компонент и лепить кучу вложенных тэгов не нужно. Зачем столько дивов с уловиями?

Comments

[Анатолий Кучин]

Внутри компонентов описание каждого input.

<form class="form">
    <mat-form-field class="full-width">
        <input type="text" matInput placeholder="Имя" value={{data}}>
    </mat-form-field>
</form>

Как сделать, чтобы компоненты возвращали значение, чтобы потом собрать их с кнопки?

[Антон Швец]

Анатолий Кучин, зачем делать множество компонентов, различающихся только плейсхолдером?
Я бы их вообще убрал, вставлял напрямую

<mat-form-field class="col-3">
  <input type="text" matInput placeholder="Имя" [(ngModel)]="data.name" name="name">
</mat-form-field>

Если прям хочется убрать повторяющиеся тэги можно сделать директиву.

[Анатолий Кучин]

Антон Швец, Да, хорошо, исправлю)
У меня маленький опыт с Angular. Не подскажите, как все-таки собрать все компоненты и вывести через консоль с кнопки?

[Антон Швец]

Анатолий Кучин, я уже написал кусочек, который будет сразу изменять data.name, не надо ничего собирать. Так же и для остальных.
А вообще лучше освоить реактивные формы.

[Анатолий Кучин]

Антон Швец, Так нужно отправить http запрос после изменения.