Question

我刚刚在现有代码库中编写了一个新的角度组件，并且不熟悉角度4，因此似乎无法通过模型更改来更新视图。我已经看过几个类似的问题，但是我认为我的问题可能是独特的，因为他们的解决方案无法解决我的问题。

视图很简单：它具有一个选择下拉列表，该下拉列表会影响页面上显示哪些日志。选择更改后，它将调用控制器以重新选择日志。

查看：

<nb-card size="small">
  <nb-card-header>
    <span>Filters</span>
    <br />
    <span>Log Severity: </span>
    <select id="selectVisibility" [(ngModel)]="severity" (change)="updateVisibleLogs()">
      <option value="all">All</option>
      <option value="ERR">Error</option>
      <option value="WARN">Warning</option>
      <option value="INFO">Info</option>
      <option value="DEBUG">Debug</option>
      <option value="TRACE">Trace</option>
    </select>
  </nb-card-header>
  <nb-card-body>

    <div *ngFor="let log of visibleLogs">
      {{log.msg}}
    </div>
  </nb-card-body>
</nb-card>

控制器：

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

@Component ({
  selector:'my-selector',
  styleUrls: ['./my-selector.component.scss'],
  templateUrl:'./my-selector.component.html'
})

export class MyComponent {

  updateVisibleLogs() {
    let visibleSeverityLevel = this.level(this.severity);
    let shouldBeVisible = true;

    this.visibleLogs = this.visibleLogs.splice(0);

    for (let i = 0; i < this.logObjects.length; i++, ) {
      shouldBeVisible = true;
      if (!isvalid(this.logObjects[i]))
        shouldBeVisible = false;

      if (shouldBeVisible)
        this.visibleLogs.push(this.logObjects[i].msg);
    }
  };

}

如果出现任何问题，请告诉我:)绝对可以立即将其标记为重复问题。

Answer 1

我最终发现问题在我看来。

<nb-card size="small">
  <nb-card-header>
    <span>Filters</span>
    <br />
    <span>Log Severity: </span>
    <select id="selectVisibility" [(ngModel)]="severity" (change)="updateVisibleLogs()">
      <option value="all">All</option>
      <option value="ERR">Error</option>
      <option value="WARN">Warning</option>
      <option value="INFO">Info</option>
      <option value="DEBUG">Debug</option>
      <option value="TRACE">Trace</option>
    </select>
  </nb-card-header>
  <nb-card-body>

    <div *ngFor="let log of visibleLogs">
      {{log.msg}} <------ this needed to be {{log}}
    </div>
  </nb-card-body>
</nb-card>

我的作用域变量 visibleLogs 是一个字符串数组；我需要显示每个字符串。

出现此问题是因为我将 visibleLogs 从对象数组更改为字符串数组。当它是一个对象数组时，它确实具有msg属性。不再了。

Angular 4.4，页面不会随着模型的更改而更新

1 个答案: