角控制对象的知名度在同一个视图列表(Angular controlling a list of ob

在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

现在，我想用角6到做同样的事情，但它似乎没有工作....

下面是采用了棱角分明的同样的事情：

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

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

---

我曾尝试使用这个连结此做自己：

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:

该filter管消失在转角。 从https://angular.io/guide/pipes ：

角不用于过滤或排序列表提供管道。 熟悉AngularJS开发人员知道这些作为过滤和排序依据。 有角中没有对应。

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

该角团队和众多经验丰富的开发人员角度强烈建议移动筛选和排序逻辑到组件本身。 该组件可以暴露一个或filteredHeroes属性sortedHeroes和接管的时间和频率来执行支持逻辑控制。 你将不得不把在管道和共享的跨应用程序的任何功能，可以写在一个过滤/排序服务，并注入组件。

因此，对于你的榜样，你可以这样做：

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

Answer 2:

尝试这个

<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然后我们限制使用输出ngIf如果true继续反覆question.answers ...这是你的stackblitz编辑后。

有这样做的方法不止一种array filter或dom使用ngIf和ngFor选择什么样的满足您的需求。

文章来源: Angular controlling a list of objects visibility on the same view