angular - 如何从 matInput 检索值并通过 HTTP 请求发送它？

Question

我在 Angular 中创建了一个对话框

edit-dialog.component.html

<div id="edit-dialog">
  <table>
  <tbody>
  <tr>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Nama profil" #input1>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="MSISDN" #input2>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Paket aktif" #input3>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="IMSI" #input4>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="ACC" #input5>
     </mat-form-field>
  </div></td>
  </tr>
  <tr>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="HPLMNwAcT" #input6>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPLMNwAcT" #input7>
     </mat-form-field>
  </div></td>
  <td> <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PLMNwAcT" #input8>
     </mat-form-field>
  </div></td>
  <td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PLMNSel" #input9>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPL" #input10>
     </mat-form-field>
  </div></td>
  </tr>
  <tr>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="PNN" #input11>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="SPN" #input12>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="KI" #input13>
     </mat-form-field>
  </div></td>
  <td>  <div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="OPC" #input14>
     </mat-form-field>
  </div></td>
  <td>&nbsp;</td>
  </tr>
  </tbody>
  </table>
  </div>

  <div class="mat-dialog-actions">
    <button [mat-dialog-close]=null cdkFocusInitials>Cancel</button>
    <button (click)="hello(#input1)" mat-dialog-close cdkFocusInitials>Update</button>
  </div>

edit-dialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { ApiService } from '../app.service';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'app-edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})

// export class EditDialogComponent implements OnInit {
export class EditDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>, private apiService: ApiService,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

  hello(msg) {
    window.alert(msg);
  }
}

我想知道的是，如果单击“更新”按钮，如何检索 MSISDN 值并通过 HTTP 请求发送它？

后面的部分会这样进行:

this.apiService.getData('update.php', 'msisdn').then(
      data => {
        // process the data here
      }
    );

app.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';

@Injectable()
export class ApiService {

  constructor(private http: Http) { }

  BASE_URL = 'http://localhost/esim-cms/';


    public getData(path: string, msisdn: string): Promise<any> {
      var addr = this.BASE_URL + path + "?msidn="+ msisdn;
      return this.http.get(addr).toPromise()
          .then((resp: Response) => {
              let data = resp.json();
              return data;
          });
      }
}

我还在琢磨如何做前者

Answer 1

只需使用 ngModel 将您的输入与一些变量绑定(bind)，然后使用像这样的 API 将值发送到服务器 -

<td><div mat-dialog-content>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="MSISDN" #input2 [(ngModel)]='msisdn'>
     </mat-form-field>
  </div></td>

this.apiService.getData('update.php', this.msisdn).then(
      data => {
        // process the data here
      }
    );

或者

如果您要发送多个值，那么您也可以使用 Form 获取多个值并将其发送到服务器。