时间戳

首页 > 解决方案 > Angular TypeScript 错误 - 类型“数字”不可分配给类型“任何 []”

angular - Angular TypeScript 错误 - 类型“数字”不可分配给类型“任何 []”

问题描述

我的 Angular 组件中的类型有问题。我有一个从输入中获取值并将数据发送到服务器的表单。我希望数据具有类型specs: string[]，但编译器向我抛出错误：

类型 'number' 不可分配给类型 'any[]'

但是，如果我将其更改为specs = []它效果很好。我搜索了 Angular 和 TypeScript 文档以进行解释，但没有找到任何关于我的问题的答案。

这是我的 HTML 组件：

<div class="container list-group" [formGroup]="specForm" (ngSubmit)="setSpec()">
  <div class="list-group-item information">
    Speciality: <a href="#" class="header-picture"><img src="assets/static/img/edit.png" alt=""></a>
  </div>
  <div class="list-group-item info-field-list">
    <div class="info-field-name">
      <p>Sector:</p>
    </div>
    <div class="info-field-value" *ngFor="let user of users;let i=index">
      <div class="info-field-value">
        <a class="url"> {{user.speciality}} </a> (3lvl)
      </div>
    </div>
    <div class="info-field-value">
      <input type="text" class="spec-input" formControlName="speciality" placeholder="Write text"><span
        class="icon icon-plus" (click)="setSpec()"></span>
    </div>
  </div>
</div>

和 TS 文件：

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { AuthenticationService } from '@services/auth.service';

@Component({
  selector: 'app-speciality',
  templateUrl: './speciality.component.html',
  styleUrls: ['./speciality.component.css']
})
export class SpecialityComponent implements OnInit {
  @Input() user;
  specs: string[];
  specForm: FormGroup;
  submitted = false;
  loading = false;
  constructor(private formBuilder: FormBuilder, private authService: AuthenticationService) { }

  ngOnInit() {
    this.specForm = this.formBuilder.group({
      speciality: ['']
    });
    this.authService.getUser().subscribe(
      (data) => {
        //this.specs = data.speciality;
      });
  }

  get s() { return this.specForm.controls; }

  setSpec() {
    // activating submission flag for patch function
    console.log(this.specs)
    let newSpec = this.specs.push(this.s.speciality.value)
    this.submitted = true;
    console.log(this.specs)

    if (!this.specForm.valid) {
      return
    }

    this.authService
      // sending values to auth service function
      .specAdd(newSpec)
      .subscribe(
        (data) => {
          this.submitted = false;
        },
        error => {
          this.loading = false;
        });
  }

}

任何帮助，将不胜感激。

标签： angulartypescript

解决方案

问题是您将 Array.push 结果分配给数组，Array.push 返回一个显示数组长度的数字，只是在第一次推送到数组然后将数组分配给新数组：

let newSpec = this.specs.push(this.s.speciality.value)

应该：

this.specs.push(this.s.speciality.value)
let newSpec = this.specs

推荐阅读