Блог

Я создал диалоговое окно с помощью angular, чтобы собрать информацию и сохранить ее на своем внутреннем сервере.

Проблема в том, когда я отправлю его на свой сервер, используя свой метод post, переменная coment останется неопределенной. Рассматриваемая переменная является:

вэл: «»

это мой диалоговый файл ts:

 import { Component, OnInit, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { IstManagementService } from './../../core/services/ist-management.service'; import { ReasonpopupService } from 'ClientApp/app/core/services/reasonpopup.service';

@Component({

  selector: 'app-reasonpopup',   templateUrl: './reasonpopup.component.html',   styleUrls: ['./reasonpopup.component.css'] }) export class ReasonpopupComponent implements OnInit {
     val : " " 
 
    /* reason2 : string = this.reason */
  
     onSubmit() { this.MatDialogRef.close(this.val); }
  

 
  
     getValue(val:string){
    console.log(val)
      }


  constructor(
    private istManagementService: IstManagementService,
    public MatDialogRef: MatDialogRef<ReasonpopupComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private shared:ReasonpopupService,
    

    ) { }
     ngOnInit(): void {
    
    this.shared.setMessage(this.val)   }

  reason :string   closeDialog() {
    this.MatDialogRef.close(false);   }
          
}
 

мой html-файл:

 <div>
  <div class="content-container">
    <mat-icon id="close-icon" (click)="closeDialog()">close</mat-icon>
    <span class="content-span full-width">{{ data.message }}</span>
  </div>
  <form #userForm="ngForm">
  <div class="input-reason">
    
      <mat-form-field class="example-full-width" appearance="fill" [style.width.px]=420 style="padding-bottom: 100px;" >
        <mat-label>Leave a comment</mat-label>

        <textarea
        [(ngModel)]="val"
          type="text"
          ngModel class="form-control"
          required
          #text
          minlength="3"
          class="form-control"
          name="tx"
          matInput
          placeholder="please describe the reason"
        ></textarea>
        <span *ngIf="text.invalid amp;amp; text.touched" class="error">input the reason</span>
      </mat-form-field>
   
  </div>
  <button mat-raised-button id="no-button" [mat-dialog-close]="false">NO</button>
  <button
    mat-raised-button
    [disabled]="userForm.invalid"
    id="yes-button"
    (click)="onSubmit()" 
    (click)="getValue(text.value)"
    [mat-dialog-close]="data.text"
    cdkFocusInitial
  >
    YES
  </button>

    </form>
</div>
 

The method where i pass my variable as argument on the other component that have the post method

 saveRow() {
        let addRowsRequest = {
            IstValues: this.dataSource.data.filter(r => r.editing)
            
        };
        console.log(this.val)
        this.istManagementService.postRecord(this.inputTable, addRowsRequest, this.val).subscribe(
            (res: any) => {
                console.log(this.dataSource.data.filter(r => r.editing));
                this.dataSource.data.push(this.dataSource.data.filter(r => r.editing));
                this.dataSource._updateChangeSubscription();
            }
        )
    }
 

My setter and getter service that i created to share the variable between the components

 mport { ReasonpopupComponent } from './../../tasks/reasonpopup/reasonpopup.component';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Injectable({
  providedIn: 'root'
})
export class ReasonpopupService {
val:string
  constructor(private messageDialog: MatDialog) { }

  openReasonDialog(msg: string) {
    return this.messageDialog.open(ReasonpopupComponent, {
      width: '570px',
      panelClass: 'confirm-dialog-container',
      disableClose: true,
      data: { message: msg }
    })
  }

  setMessage(data: string){
    this.val=data
    console.log(this.val)
  }

  getMessage(){
    return this.val
  }


}
 

и, наконец, мой сервис, содержащий все методы CRUD

 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ISTGenericResponse } from '../../pages/ist-management/ist-generic-response';
import { environment } from 'ClientApp/environments/environment';


@Injectable({
    providedIn: 'root'
})
export class IstManagementService {


    constructor(private httpClient: HttpClient) { }


    public getGenericStaticTablesFiltered(inputTable: string, inputKey: string, inputValue: string, inputComparison: string): Observable<ISTGenericResponse> {
        var filter = "";
        if (inputKey amp;amp; inputValue) {
            filter = "?key="   inputKey   "amp;value="   inputValue   "amp;comparison="   inputComparison;
            return this.httpClient.get<ISTGenericResponse>(environment.apiRoot   "/StaticTable/Filter/"   inputTable   filter);
        }
        else {
            return this.httpClient.get<ISTGenericResponse>(environment.apiRoot   "/StaticTable/"   inputTable);
        }
    }
    message:string
    setMessage(data: string){
        this.message=data
    }
    getMessage(){
        return this.getMessage
    }
   
    postRecord(inputTable: string, addRecord: any,  message:any ) {
        return this.httpClient.post(environment.apiRoot   "/StaticTable/Add/"   inputTable, addRecord,  message);
    }

    deleteRecord(inputTable: string, deleteRecord: any) {
        const headers = new HttpHeaders({ 'Content-Type': 'application/json; charset=utf-8' });
        return this.httpClient.request('delete', environment.apiRoot   "/StaticTable/Delete/"   inputTable, { body: deleteRecord, headers: headers });
    }

    editRecord(inputTable: string, editRecord: any): Observable<any> {
        const headers = new HttpHeaders({ 'Content-Type': 'application/json; charset=utf-8' });
        return this.httpClient.request('put', environment.apiRoot   "/StaticTable/Update/"   inputTable, { body: editRecord, headers: headers, });
  
 

}

}

Заранее благодарю вас

согласно этому коду, вы вызываете this.shared.setMessage(this.val) внутри ngOnInit() метода ReasonpopupComponent

который всегда будет неопределенным, потому ngOnInit() что вызывается только при инициализации компонента до того, как пользователь введет какие-либо данные.

что вам нужно сделать, так это переместиться this.shared.setMessage(this.val) внутрь onSubmit() метода, так что в конце концов это выглядит так

 export class ReasonPopupComponent implements OnInit {
  val = '';

  constructor(
    private istManagementService: IstManagementService,
    public MatDialogRef: MatDialogRef<ReasonPopupComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private shared:ReasonpopupService,
  ) { }

  ngOnInit(): void {
  }

  onSubmit() {
    this.shared.setMessage(this.val);
    this.MatDialogRef.close(this.val);

  }
  
  closeDialog() {
    this.MatDialogRef.close(false);
  }
}
 

что было бы еще лучше, если бы ваш «другой компонент» открывал всплывающее окно, вы могли бы использовать подписчика диалогового окна угловой материал. как вы видите onSubmit() , метод in this.matDialogRef.close(this.val) уже вызывается со значением. все, что вам нужно сделать, это подписаться на него в разделе «другой компонент», вот так.

 dialogRef.afterClosed().subscribe(result => {
      console.log(result)
    });