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

有人可以帮我实现它吗？还是给我一些指导？

我尝试使用此链接自己进行以下操作：

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管道在Angular中消失了。来自https://angular.io/guide/pipes：

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

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

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移入组件本身。该组件可以公开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选择适合您的需求的方法有多种。

角度控制在同一视图上的对象可见性列表

2 个答案: