0

我无法让我正在开发的应用程序的一部分正常工作：

这是组件的逻辑：

export class StockStatusComponent implements OnInit{

  articles: Article[] = [];
  selectedLevel: any;

  constructor(private service: ArticleService) {
   }

  ngOnInit(): void {
    this.dataBackend();
  }


  dataBackend() {

    this.service.getArticles().subscribe(res => {
      for (let i = 0; i < res.length; i++) {
        let actualStock = res[i].stockActual;
        let minimumStock = res[i].stockMinimo;
        if (actualStock < minimumStock) {
          this.articles.push(res[i]);
        }
      }
    })
    console.log(this.articles);
  }

  filterByLevels(event: any) {

    const level = event.target.value;
    this.selectedLevel = level;
  }

  selectLevel() {

    console.log("Selected level: " + this.selectedLevel);
    if (this.selectedLevel === "all") {
      this.service.getArticles().subscribe(res => {
        this.articles = res;
      })
    }
    console.log(this.articles);
  }

}

HTML：

<div>
    <div>
        <label>Filter by Stock Levels</label>
        <select (change)="filterByLevels($event)">
            <option value=""></option>
            <option value="all">All</option>
        </select>
        <button class="btn btn-success" (click)="selectLevel()">Select</button>
    </div>
</div>

代码解释步骤：

访问组件后，它应该通过控制台向我显示那些满足开发条件的“文章”，在这部分我认为我没有问题，因为它正确地为我带来了所需的数据。(ngOnInit)

我遇到的问题是，当我选择列表中的任何选项时，例如“全部”级别，这将必须为我带来所有文章，并且为了带来它们，我必须单击两次。为了澄清，我留下了这个例子：

例子：

  1. 我输入了组件，并且由于在 ngOnInit () 中执行的方法，它向我显示了一个空数组，因为目前没有符合条件的记录。

  2. 我从列表中选择“全部”选项并尝试带上所有记录，但它给我带来了与通过 ngOnInit 获得的相同结果。为了达到期望，我必须再次单击并再次执行方法“选择级别（）”。

非常感谢您，我感谢您的任何帮助！

4

1 回答 1

2 
selectLevel() {

    console.log("Selected level: " + this.selectedLevel);
    if (this.selectedLevel === "all") {
      this.service.getArticles().subscribe(res => {
        this.articles = res;
        console.log(this.articles);
      })
    }
  }

将您的控制台日志放入您的订阅中。这将向您展示您的文章。

您的订阅逻辑在您第一次单击并触发 console.log(this.articles) 后执行，这意味着第一个控制台日志为空，第二次显示。但是您的数据总是首先从订阅返回，只是稍晚一点。

您需要了解 Angular 的概念Observables以及Promises如何使用它们。

于 2021-06-16T13:12:55.563 回答