Question

我的app.components.ts中有以下简单代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'portfolio';
  data: string;
  dataArray: number [] = [];

  onSubmit(){
    var initData = []

    initData = this.data.split('\n')


    for(var i=0; i<initData.length; i++){
      if(isNaN(parseFloat(initData[i])) == false && initData[i] != null){
        this.dataArray[i] = parseFloat(initData[i])
      }
    }

  }
}

并在我的模板中：

<form (submit) = "onSubmit()">
    <textarea rows="20" cols = "10" name="what" [(ngModel)] = "data"></textarea>
    <input type='submit'>
</form>

<h1>{{dataArray}}</h1>

由于某种原因，除非我将this.dataArray = []添加到onSubmit方法，否则dataArray不会显示任何内容。谁能向我解释为什么会这样吗？

Answer 1

要以json格式显示数组的对象状态，您需要使用json管道，如下所示：

<form (submit) = "onSubmit()">
    <textarea rows="20" cols = "10" name="what" [(ngModel)] = "data"></textarea>
    <input type='submit'>
</form>

<h1>{{dataArray | json}}</h1>

这里是stackblitz example。如果仅将对象绑定到模板，则它将使用它的默认字符串表示形式，这是不合适的。希望有帮助。

Answer 2

我猜想这种行为的罪魁祸首是dataArray。它是一个数组，提交时您无需更改它，只需将元素推入其中，但是如果您在this.dataArray = []方法中进行了onSubmit，则可以更改数组和Angular {{...}}插值认为需要在模板中进行更新。因此，如果您将模板<h1>{{dataArray}}</h1>更改为以下内容：

<div *ngFor="let data of dataArray">
  {{ data }}
</div>

您将看到提交时所做的更改。

数据未通过组件类方法绑定

2 个答案: