過濾角度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;

      });
  }