将单个字符串推送到数组答案

【问题标题】：To push single string to an array将单个字符串推送到数组
【发布时间】：2019-03-27 04:52:20
【问题描述】：

我有一个名为 UpdateContact 的组件，它显示在dialog 窗口中，该组件用于显示注入的对象，并将对该注入的对象执行 PUT 操作.组件代码如下：

HTML

<form [formGroup]="updateForm">
    <mat-form-field>
        <input matInput [(ngModel)]="data.name"   placeholder="Name"  formControlName="Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput [(ngModel)]="data.EMailAddresses"  placeholder="Email Address"  formControlName="Email">
        <mat-error *ngIf="updateForm.controls.email.hasError('email')>
             Please enter a valid email address
        </mat-error>
    </mat-form-field>
    <button mat-flat-button (click)="onClick()">Save</button>
</form>

import { Component, Inject,  OnInit} from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, } from '@angular/material';
import { IContact } from 'src/app/models';
import { MyService } from 'src/app/services/my.service';

@Component({
  selector: 'app-update-contact',
  templateUrl: './update-contact.component.html',
  styleUrls: ['./update-contact.component.scss'],
})
export class UpdateContactComponent implements OnInit {
  public updateForm: FormGroup;
  public someContact: IContact

  constructor(@Inject(MAT_DIALOG_DATA) public data: IContact ,
              private fb: FormBuilder,
              public dialog: MatDialog,
              public myService: MyService,
              ) {} 

  public ngOnInit(): void {
    this.updateForm = this.fb.group({
      Name: [null],
      Email: [null,[Validators.email]],
    });
  }

  public onClick() {
    this.someContact= this.updateForm.value;
    this.someContact.EMailAddresses = [];
    this.someContact.EMailAddresses.push(this.updateForm.value.Email);  
    this.myService.updateContact(this.someContact, this.someContact.Id);
  }

}

联系人 JSON

{
  "Id": "",
  "Name": "",
  "EMailAddresses": [""],
},

服务文件

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import {IContact } from 'src/app/models';

@Injectable({
  providedIn: 'root',
})

export class MyService {

 private  baseUrl : string = '......api Url.....';

 constructor(private http: HttpClient) {
}

public  updateContact(Id : string): Observable<object> {
  const apiUrl: string = `${this.baseUrl}/contacts/${Id}`;

  return this.http.put(apiUrl, contact);
}

}

现在当我点击 SAVE 按钮而不在 Email 输入字段中进行任何更改时，我无法执行 PUT 操作并得到这个错误。

【问题讨论】：

不，我并不是说错误是因为这个。我只是注意到了。 :)
顺便说一句，你可以像Name: [data.name], Email: [data.EMailAddresses,[Validators.email]]一样初始化ngOnInit里面的材质输入，然后去掉[(ngModel)]。
实际上我尝试了您的解决方案，即没有使用[(ngModel)]，但仍然存在相同的问题，
但是如果我在Email i/p 字段中进行任何更改，PUT 操作会正常进行，也不会发生错误。
也发这个myService.updateContact看看我能不能帮忙

标签： javascript angular typescript angular6

【解决方案1】：

我已经解决了我的问题。由于属性 EMailAddresses 是 array，我只需将 EMailAddresses 转换为 string 并将其分配给一个变量，例如这个：

public mail: string = this.data.EMailAddresses.toString();

并且需要像这样显示在template中：

HTML

<mat-form-field>
         <input matInput [(ngModel)]="mail"  placeholder="Email Address"  formControlName="Email">
 </mat-form-field>

而不是[(ngModel)]="data.EMailAddresses"

【讨论】：

【解决方案2】：

表单初始化中存在语法错误：

  public ngOnInit(): void {
    this.updateForm = this.fb.group({
      Name: [null],
      Email: [null,[Validators.email],
    });
  }

在“电子邮件”表单控件中缺少一个方括号！

【讨论】：