Angular 控制对象列表在同一视图中的可见性

Question

在 AngularJs 中，如果您有 2 个列表，并且第二个列表依赖于第一个列表的值，它将自动更新。这可以像这样简单地完成：

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;
  };
}

在 codepen 上：

https://codepen.io/r3plica/pen/dQzbvX?editors=1010#0

现在，我想用 Angular 6 做同样的事情，但它似乎不起作用....

这是使用 Angular 的相同内容：

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

有人可以帮我让它工作吗？或者给我一些指导？

我自己尝试使用这个 link:

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

但是当我更新我的 stackblitz 时，它不起作用:(

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

我要尝试其他方法，因为这不起作用。我很惊讶没有人发布任何可能的解决方案....我认为这是一件很常见的事情

Answer 1

试试这个

<ng-container *ngFor="let question of questions">
  <div *ngIf="question.active">
    <ul>
      <li *ngFor="let answer of question.answers">{{ answer.text }}</li>
    </ul>
  </div>
</ng-container>

当我们添加 ngFor 以在 array 上迭代时，如果 true 继续并在 question.answers 上迭代，我们将使用 ngIf 限制输出 ...这是编辑后的 stackblitz。

通过 array filter 或在 dom 中使用 ngIf 和 ngFor 选择适合您需要的方法，有不止一种方法。

Answer 2

filter 管道在 Angular 中消失了。来自 https://angular.io/guide/pipes:

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.

他们推荐在组件逻辑中过滤列表项：

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.

所以对于你的例子，你可以这样做：

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">

Angular 控制对象列表在同一视图中的可见性

Angular controlling a list of objects visibility on the same view

2-way-object-databinding

angular