Question

当我在代码中使用Array.push()时，它会更新DOM中的<li>元素，但是当我想更新数字数据类型时，它不会更新<p>元素。为什么这样，我怎么能强迫＆＃34;如果需要，请更新<p>元素？

api.ts

export let value = 1;
export let array = [2,3,4,5,6];

我的组件：

import { Component } from '@angular/core';
import { value, array } from './api';

@Component({
  selector: 'my-app',

  template: `
    <p>{{ val }}</p>
    <ul>
    <li *ngFor="let item of arr">{{ item }}</li>
    </ul>
    <button (click)="addVal()">Add 1 to val</button>
    <button (click)="addArr()">Add 1 to arr</button>
  `
})
export class AppComponent {
  val = value;
  arr = array;

  addVal() {
    value += 1;

    console.log(value);
  }

  addArr() {
    array.push(7);
  }

}

Plunker code

Answer 1

value是一个原语（number，如string和boolean），并按值传递（复制）数组是一个对象，通过引用传递（相同的实例）

因此

val = value;

是一次性操作，并且不在这两者之间建立连接。

因此，您需要更改addValue

  addVal() {
    val += 1;

    console.log(value);
  }

Answer 2

您没有引用正确的字段。它应该是：

 addVal() {
    this.val += 1;

    console.log(value);
  }

  addArr() {
    this.arr.push(7);
  }

工作示例：https://plnkr.co/edit/sHUQKc7MrEzCi4qxxtBp?p=preview

注意：Günter所说的绝对正确，js中的数字不可变。我以为你不是在想这个问题。

为什么Array.push（）会更改DOM中的元素，但是简单的值添加不会？

2 个答案: