时间戳

首页 > 解决方案 > 如何通过 Angular 中的表单获取一组数字？

javascript - 如何通过 Angular 中的表单获取一组数字？

问题描述

我需要用户通过输入键入一个数字数组。但这样做只是将数组作为字符串返回给我。我希望我能以某种方式将字符串转换为数字数组，但我不知道如何。

组件.html：

<div class="d-flex justify-content-center mt-5">
  <div class="bg-white rounded-1 p-3" style="width: fit-content">
    <label for="array" class="form-label">INTRODUCE LA LISTA DE NUMEROS</label>
    <form [formGroup]="arrayForm" (ngSubmit)="enviarArray()">
      <input
        type="text"
        formControlName="userArray"
        id="array"
        class="form-control"
        aria-describedby="array"
        style="font-size: 35px"
      />
      <div class="text-center m-2">
        <button
          type="submit"
          class="btn btn-dark"
          style="width: 150px; height: 70px; font-size: 40px"
          [disabled]=""
        >
          Ordenar
        </button>
      </div>
    </form>
  </div>
</div>

组件.ts：

import { Component, OnInit } from '@angular/core';
import { ArrayService } from 'src/app/services/array.service';
import { Array } from 'src/app/models/Array';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [ArrayService],
})
export class HomeComponent implements OnInit {
  arrayForm: FormGroup;
  newArray: [] = []
  constructor(
    private arrayService: ArrayService,
    private formBuilder: FormBuilder
  ) {
    this.arrayForm = this.formBuilder.group({
      userArray: ['', Validators.required]
    })
  }
  
  ngOnInit(): void {}

  enviarArray(){
    console.log(this.arrayForm.value)
  }
}

标签： javascriptangulartypescript

解决方案

1）您可以使用JSON.parse()将字符串数组转换为数字数组

JSON.parse(text)

但一定要处理异常。如果您传递的字符串不是有效的 JSON，那么它将抛出SyntaxError

2）然后，您可以使用Array.isArray检查解析的数据是否为数组

const input = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", e => {
  const text = input.value;
  let arrayOfNumber;
  try {
    arrayOfNumber = JSON.parse(text);
    if (Array.isArray(arrayOfNumber)) {
      console.log("This is valid array: ")
      console.log(arrayOfNumber);
    }
  } catch (error) {
    console.log("Wrong Array");
  }
})
<input type="text" name="" id="">
<button>convert</button>

推荐阅读