Question

我有一组对象，其中包含约2年的日期，价格（价格（在API调用后稍后会动态添加））和可以在角度应用程序中更改的验证：

calendarArrayDates = [
  {"date": "2018-10-23", "price":"2313", "date_is_valid": true},
  {"date": "2018-10-24", "price":"2313", "date_is_valid": true},
  ...
  {"date": "2018-11-01", "price":"2313", "date_is_valid": false},
  ...
  {"date": "2019-02-01", "price":"2313", "date_is_valid": true}
]

我想将这些日期动态显示为日历视图，因此我在component.html中创建了该div：

<div [innerHTML]="renderHTMLCalendar()"></div>

调用此函数：

  renderHTMLCalendar(){
    console.log("RENDER Calendar");
    let container = "";
    for (var calendarDate of this.calendarArrayDates) {
      var date = calendarDate['date'];
      var mDate = moment(date)
      if (date === mDate.startOf('month').format(CALENDAR_DEFAULT_FORMAT)) {
        container = "<div class='month'>"
      }

      container += `<div>
                      <div class='day'>${calendarDate['date']}
                      <div *ngIf="${calendarDate['price']}" class='price'>${calendarDate['price']}</div>
                    </div>`;
      if (mDate === mDate.endOf('month')) {
        container += "</div>"
      }
    }
    return container;
  }

* ngIf在函数<div *ngIf="${calendarDate['price']}" class='fare'>${calendarDate['price']}</div>中不起作用，错误价格未定义（忽略* ngIf）。我怎么写这个？
当我单击div可使该容器可用并启动该函数时，它将多次调用该函数，并因此调用console.log（“ RENDER Calendar”）。是否存在我不知道并导致多次调用该函数的行为问题？
因为以后价格会动态上涨，所以对于类似问题没有更好的解决方案吗？尤其是当数组要渲染约600个日期时（并监听ngIf price和date_is_valid的更改。）

Answer 1

您的问题的快速示例 https://stackblitz.com/edit/angular-2u6pgj

您并不需要实现“ month”块，因为只想向您展示Angular如何处理它，而* ngIf的工作原理就足够了。

您似乎误解了Angular处理Model和View的方式，View不是由Model动态“构建”的，而是与Model同步数据的。请检查其Architecture Ovreview

来自typescript函数的Angular div innerHTML多次调用

1 个答案: