过滤角度json数据

Question

我是angular新手，但我一直在尝试以 angular filter一些数据。 我希望它 // 显示语言值为“eng”的数据，但我的解决方案一直给我一个错误，如下所示

//src/app/admin/kiosk/questions/questions.component.ts(88,24) 中的错误：错误 TS2339：属性 'language' //在类型 'any[]' 上不存在。

下面是我的代码

 private GetQuestions() {

       this.sub = this.kioskService.GetQuestions()
      .subscribe(res => {

        this.questions.language ==='eng';

        this.loading = false;

      });
  }

//这是视图

 <div  class="row" *ngFor="let question of questions  ;
                               let i = index
                               let even = even; 
                               let odd  = odd "
                              [ngClass]="{ odd: odd, even: even }"
                              >

        <p style="color: black; font-size: 15px;" class="id"><b>.</b></p>
        <p ng-hide="question.language === 'eng'" class="question">{{ question.question }}</p>
        <p class="disease">{{ question.disease }}</p>
        <p class="language" *ngIf="question.language === 'eng'">English</p>
        <p class="language" *ngIf="question.language === 'swa'">Kiswahili</p>
        <p class="position">{{ question.position }}</p>
        <p class="status">ACTIVE</p>
        <p class="date">{{ question.createdOn | date:'shortDate' }}</p>





   </div>

//请帮忙。

Answer 1

我认为这是问题所在：

private GetQuestions() {

   this.sub = this.kioskService.GetQuestions()
  .subscribe(res => {

    this.questions.language ==='eng';

    this.loading = false;

  });
}

如果问题是一个对象数组，则不能直接为该数组分配一个称为语言的属性：

//ERROR
this.questions.language ==='eng';

因此，根据您在 GetQuestions 方法中获得的数据：

private GetQuestions() {

   this.sub = this.kioskService.GetQuestions()
  .subscribe(res => {

    this.questions.language ==='eng';

    this.loading = false;

  });
}

我认为 'this.kioskService.GetQuestions()' 正在返回一个 observable，并且您正在订阅它，好的，这很好，但后来，¿你对 observable 数据做了什么？，你应该通过'this.kioskService.GetQuestions()' 方法及其内部，而不是这样做：

this.questions.language ==='eng';

你应该做这个：

private GetQuestions() {

   this.kioskService.GetQuestions()
  .subscribe(res => {

       this.questions = res;
       this.loading = false;

   });

}

请记住，您在 observable 中的响应应该包含一个对象数组，并且该数组中的每个对象都可能有一个属性“语言”。

哦，我意识到的另一件奇怪的事情是，您没有为变量分配任何内容，而是严格比较数组和字符串：

//This is not an assignement, this returns an error because this property doesn't exists in an array
this.questions.language ==='eng';

Answer 2

安装以下软件包

npm install --save lodash
npm install --save-dev @types/lodash

在该组件中导入 lodash 库

import * as _ from 'lodash';

声明为

questions: any[] = [];


private GetQuestions() {

       this.sub = this.kioskService.GetQuestions()
      .subscribe(res => {

        this.questions = res;

        _.each(this.questions,q=>{
             q.language = "eng"
        }) 

        this.loading = false;

      });
  }