过滤角度 json 数据答案

【问题标题】：Filter angular json data过滤角度 json 数据
【发布时间】：2020-03-09 01:25:42
【问题描述】：

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

//错误在 src/app/admin/kiosk/questions/questions.component.ts(88,24)：错误 TS2339：属性“语言”//在类型“任何 []”上不存在。

下面是我的代码

 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>

//请帮忙。

【问题讨论】：

我在这里没有看到任何过滤器代码。你能发布你的完整组件吗？该错误基本上是说您的 questions var 是 any 类型，因此它没有名为 language 的属性。
只需将您的类型从 any[] 更改为 any。
为什么要使用相等运算符来为变量赋值？
私有 GetQuestions() { this.sub = this.kioskService.GetQuestions() .subscribe(res => { this.questions=res; this.loading = false; }); }

标签： json angular typescript model-view-controller

【解决方案1】：

我认为这是问题所在：

private GetQuestions() {

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

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

    this.loading = false;

  });
}

如果 questions 是一个对象数组，则不能直接为数组分配一个名为 language 的属性：

//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';

【讨论】：

【解决方案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;

      });
  }

【讨论】：