angular4中的两种方式绑定问题

Question

我无法在 angular4 中使用双向绑定。这是组件代码。

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

@Component({
  selector: 'app-date-selector',
  templateUrl: './date-selector.component.html',
  styleUrls: ['./date-selector.component.css']
})
export class DateSelectorComponent implements OnInit {

  private statDate: Date;

  constructor() { }

  ngOnInit() {
    this.statDate = new Date()
  }

  goToPreviousDay(): void
  {
    console.log("previous day clicked");
    this.statDate.setDate(this.statDate.getDate() - 1);
    console.log(this.statDate);
  }

  goToNextDay(): void
  {
    console.log("next day clicked");
    this.statDate.setDate(this.statDate.getDate() + 1);
    console.log(this.statDate);
  }
}

我在我的部分中指的是 statDate。

<div>
    <a><span class="glyphicon glyphicon-chevron-left" (click)=goToPreviousDay()></span></a>
    <span class="text-center text-muted" [(innerText)]="statDate"></span>
    <a><span class="glyphicon glyphicon-chevron-right" (click)=goToNextDay()></span></a>
</div>

控制台日志显示 statDate 正在更新，但 UI 中并未反映出来。

Answer 1

需要指出的几个问题

Angular绑定

对于您的情况，由于我们讨论的是跨度，因此您所需要的只是单向绑定。在 Angular.

中有几种方法可以做到这一点

最常见、可读且最简单的方法是使用 interpolation. Also you are trying to display a date, so you should use Angular's DatePipe，如下所示：

<span>{{statDate | date}}</span>

这将使用多个变量漂亮地打印您的日期，以按照您的需要格式化它。

HTML 事件绑定语法

HTML 中的 click event binding 也应如下所示：

<span (click)="goToPreviousDay()"></span>

⇨ 注意 (click)= 之后的 "，Angular 代码在 [= 停止执行是很常见的42=] 语法错别字，这可以解释缺少 UI 更新。

结果

结合上面提到的所有内容，结果 HTML 将是：

<div>
  <a>
    <span class="glyphicon glyphicon-chevron-left" (click)="goToPreviousDay()"></span>
  </a>
  <span class="text-center text-muted">{{statDate | date}}</span>
  <a>
    <span class="glyphicon glyphicon-chevron-right" (click)="goToNextDay()"></span>
  </a>
</div>

Answer 2

而不是 two-way binding，您在这里只需要 one-way binding。

改变这个：

<span class="text-center text-muted" [(innerText)]="statDate"></span>

至：

<span class="text-center text-muted" > {{ statDate }}</span>

angular4中的两种方式绑定问题

Two way binding issue in angular4

javascript

angular

two-way-binding

Angular绑定

HTML 事件绑定语法

结果