Угловое управление списком объектов видимости в том же представлении

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

Но когда я обновил свой стек-блиц, он нене работает: (

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

Я собираюсь попробовать что-то еще, потому что это не сработало. Я удивлен, что никто не опубликовал возможные решения .... Iдумал, что это будет обычным делом

Answer 1

Труба filter ушла в Angular. От https://angular.io/guide/pipes:

Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают это как filter и orderBy. В Angular нет эквивалентов.

Они рекомендуют фильтровать элементы списка в логике компонента:

Команда Angular и многие опытные разработчики Angular настоятельно рекомендуют перенести логику фильтрации и сортировки в сам компонент. Компонент может предоставлять свойство FilterHeroes или 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, чтобы выбрать то, что соответствует вашим потребностям.