角度控制同一视图上的对象可见性列表 [英] Angular controlling a list of objects visibility on the same view

问题描述

在AngularJs中，如果您有2个列表，而第二个列表取决于第一个列表的值，它将自动更新。可以这样简单完成：

In AngularJs if you had 2 lists and the second list depended on the values of the first list, it would automatically update. This could be done simply like this:

function toDoCtrl($scope) {  
  $scope.questions = [
    {
      active: true,
      text: "Question 1",
      answers: [
        {
          text: "Answer 1"
        },
        {
          text: "Answer 1"
        },
        {
          text: "Answer 3"
        }
      ]
    },
    {
      active: true,
      text: "Question 2",
      answers: [
        {
          text: "Answer 4"
        },
        {
          text: "Answer 5"
        },
        {
          text: "Answer 6"
        }
      ]
    }
  ];
  $scope.setActive = function(question) {
    question.active = !question.active;
  };
}

在代码笔上：

https://codepen.io/r3plica/pen/dQzbvX ？editors = 1010＃0

现在，我想使用 Angular 6 做同样的事情，但是它并没有似乎起作用。...

Now, I want to do the same thing using Angular 6, but it doesn't seem to work....

在这里使用Angular是同一件事：

Here is the same thing using Angular:

https://stackblitz.com/edit/angular-qkxuly

有人可以帮助我使它正常工作吗？还是给我一些指导？

Can someone help me make it work? Or give me some direction?

我尝试使用以下链接自己完成此操作：

I have tried to do this myself using this link:

https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

但是当我更新我的stackblitz时，它不起作用：（

But when I updated my stackblitz, it didn't work :(

https://stackblitz.com/edit/angular-jya414

我将尝试其他方法，因为这行不通。令我惊讶的是，没有人发布任何可能的解决方案...。我认为这将是很常见的事情

I am going to try something else, because this didn't work. I am surprised no one has posted any possible solutions....I thought this would be a common thing

推荐答案

过滤器管道在Angular中消失了。来自 https://angular.io/guide/pipes ：

The filter pipe is gone in Angular. From https://angular.io/guide/pipes:

Angular不提供管道过滤或排序列表。熟悉AngularJS的开发人员将其称为filter和orderBy。 Angular中没有等效项。

Angular doesn't provide pipes for filtering or sorting lists. Developers familiar with AngularJS know these as filter and orderBy. There are no equivalents in Angular.

他们建议在组件逻辑中过滤列表项：

They recommend filtering list items in the component logic:

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移入组件本身。该组件可以公开filteredHeroes或sortedHeroes属性，并控制执行支持逻辑的时间和频率。您本可以放入管道并在应用程序中共享的任何功能都可以写入过滤/排序服务中，然后注入到组件中。

The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself. The component can expose a filteredHeroes or sortedHeroes property and take control over when and how often to execute the supporting logic. Any capabilities that you would have put in a pipe and shared across the app can be written in a filtering/sorting service and injected into the component.

所以对于您的示例，您可以执行以下操作：

So for your example, you could do something like this:

questions: Question[] = [
  {
    active: true,
    text: "Question 1",
    answers: [
      {
        text: "Answer 1"
      },
      {
        text: "Answer 1"
      },
      {
        text: "Answer 3"
      }
    ]
  },
  {
    active: true,
    text: "Question 2",
    answers: [
      {
        text: "Answer 4"
      },
      {
        text: "Answer 5"
      },
      {
        text: "Answer 6"
      }
    ]
  }
]
activeQuestions = this.questions.filter(q => q.active);

setActive(question: Question): void {
  question.active = !question.active;
  this.activeQuestions = this.questions.filter(q => q.active);
}

在模板中：

<div *ngFor="let question of activeQuestions">

这篇关于角度控制同一视图上的对象可见性列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！