对嵌套的 observable 进行排序

我这里有一个 JSON 文件，如下所示：

[
    {
        "question": "What is your age range?",
        "options": ["10-20","20-30","30-40","40-50"]
    },
    {
        "question": "How did you find us?",
        "options": ["Friend recommendation","Google","Other"]
    },
    {
        "question": "Are you interested in etcetc?",
        "options": ["No","Yes","Meh"]
    }
]

在我的项目中，我有一个具有相同结构的模型，如下所示：

export interface Test {
    question: string;
    options: string[];
}

在我的服务文件中，我像这样读取文件（将其转换为可观察的，因为我希望能够更改数据的顺序，并可能稍后添加/删除/更改问题）：

getSurveyQuestion(): Observable<Test[]> {
    return this.http
        .get<Test[]>("/path/to/questions.json")
        .do(data => console.log("All : " + JSON.stringify(data)))
}

在控制台中，以上输出：

JS: 全部 : [{"question":"您的年龄范围是多少？,"options":["10-20","20-30","30-40","40-50"]}, { //.....}]

我的组件文件如下所示：

export class TestComponent implements OnInit {
    propertyData: Test[] = [];

    constructor(private router: Router, private testService: TestService) {}

    ngOnInit() {
        this.testService.getSurveyQuestion().subscribe(data => {
            this.propertyData = data;
        }, err => {
            console.log(err);
        })
    }
}

在我的 html 中，我将其输出到屏幕，如下所示：

<StackLayout *ngFor="let item of propertyData">
    <Label text="{{item.question}}"></label>
</StackLayout>

现在，我想在 html 中添加一个按钮或其他内容，点击后会调用一个函数来重新排列用户可以在屏幕上看到的项目。目前，简单地按问题排列可观察数组（按字母顺序、升序或降序）就足够了。我已经尝试了几个小时来完成这个任务，但我在谷歌（和 stackoverflow）上发现的任何东西都没有帮助我完成这个任务。

你们中有人知道如何按照我正在寻找的方式对可观察数据进行排序/重新排列吗？

提前致谢。

（如果有帮助的话，我正在使用 NativeScript + Angular）。

您可以使用可观察的map http://reactivex.io/documentation/operators/map.html运算符对列表进行排序。

ngOnInit() {
    this.testService.getSurveyQuestion()
      .map(data => {
        return data.sort((a: Test, b: Test) => {
          const aQ = test.question.toUpperCase();
          const bQ = test.question.toUpperCase();
          return aQ.localeCompare(bQ); // that will sort them alphabetically
        )); 
      })
      .subscribe(data => {
        this.propertyData = data;
      });
  }

现在，至于单击按钮时更改它们的排序方式的问题，这有点棘手。您需要使用于排序的函数异步。您可以通过在组件上创建属性来做到这一点：

sortFn$ = new BehaviorSubject<SortFnType>(alphabeticalSort // or whatever default sort you want);

阅读更多关于BehaviorSubjects here: http://reactivex.io/rxjs/manual/overview.html#behaviorsubject http://reactivex.io/rxjs/manual/overview.html#behaviorsubject

Then next的功能BehaviorSubject单击按钮时。

onClick() {
  const reverseAlphabeticalSort = (a: Test, b: Test) => {
      const aQ = test.question.toUpperCase();
      const bQ = test.question.toUpperCase();
      return bQ.localeCompare(aQ); 
  });
  this.sortFn$.next(reverseAlphabeticalSort);
}

然后使用combineLatest http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-combineLatest将其添加到您的信息流中。

ngOnInit() {
  this.testService.getSurveyQuestion()
    .combineLatest(this.sortFn$)
    .map(([data, sortFn]: [Test[], SortFnType]) => {
      return data.sort(sortFn);
    })
    .subscribe(data => {
      this.propertyData = data;
    });
}

另外，我建议使用async管道将数据传递到模板中，这样您就不必搞乱订阅清理。

<StackLayout *ngFor="let item of sortedData$ | async">
  <Label text="{{item.question}}"></label>
</StackLayout>

然后在你的组件中：

sortedData$: Observable<Test[]>;

ngOnInit() {
   this.sortedData$ = this.testService.getSurveyQuestion()
    .combineLatest(this.sortFn$)
    .map(([data, sortFn]: [Test[], SortFnType]) => {
      return data.sort(sortFn);
    })
  }

请注意，上面的代码是“草稿”形式，可能需要一些小的调整/编辑才能在您的程序中工作，但那里的方法将适用于您的用例。