Angular 6 Checkbox Multi Filter

I want to filter multiple variable (tag1, tag2 and tag3) of JSON objects (source) using checkbox.

The JSON is like followed :

 {
      "hits": [
        {
          "id": "40rVznABk98ZNay",
          "rank": 1,
          "score": 11,
          "source": {
            "article_lang_inv": "NULL",
            "date_collect": "2020-01-22T00:00:00",
            "doc_id": 8030829966141082359,
            "doc_name": "Article L34",
            "doc_type": "article",
            "lang": "fr",
            "tag1": "a",
            "tag2": "d",
            "tag3": "g"
          }
        }
      ],
      "summary": {
        "elastic_index": "test_custom_analyzer",
        "limit_asked": 10,
        "query_string": "texte",
        "successful": 5,
        "total_hits_returned": 4748
      }
    }

I've use the answer of Daniel Gimenez to build my filter but I got some issues on tag2 and tag3. tag1 works fine but for tag2 for example, there is just the 'f' that works.

MyComponent.ts

export class MyComponent {
      texte: string;
      rpsS: any = [];
      rpsSummary: any = [];
        filteredTag: any = [];
          filterTag1 = {a: true, b: true, c: true};
          tag1 = ['a', 'b', 'c'];
          filterTag2 = {d: true, e: true, f: true};
          tag2 = ['d', 'e', 'f'];
          filterTag3 = {g: true, h: true, i: true};
          tag3 = ['g', 'h', 'i'];

        filterByTag() {
            if (!this.filterTag1.a && !this.filterTag1.b && !this.filterTag1.c && !this.filterTag2.d && !this.filterTag2.e && !this.filterTag2.f && !this.filterTag3.g && !this.filterTag3.h && !this.filterTag3.i 
              ) {
              this.filteredTag = this.rpsS;
              return;
            }
            this.filteredTag = this.rpsS.filter( x =>
              (
                (this.filterTag1.a && (x.source.tag1 === 'a')) ||
                (this.filterTag1.b && (x.source.tag1 === 'b')) ||
                (this.filterTag1.c && (x.source.tag1 === 'c')) &&
                ((this.filterTag2.d && (x.source.tag2 === 'd')) ||
                (this.filterTag2.e && (x.source.tag2 === 'e')) ||
                (this.filterTag2.f && (x.source.tag2 === 'f'))) &&
                ((this.filterTag3.g && (x.source.tag3 === 'g')) ||
                (this.filterTag3.h && (x.source.tag3 === 'h')) ||
                (this.filterTag3.i && (x.source.tag3 === 'i'))))
              );
          }

     search() {
        this.httpClientService.getDocument(this.texte).subscribe(
          (data: any) => {
            this.rpsS = this.filteredTag = data.hits;
            this.rpsSummary = data.summary;
          },
          errorCode => console.log(errorCode)
        );
      }
}

MyComponent.html

    <label>
        <input [(ngModel)]="filterTag1.a" (ngModelChange)="filterByTag()" 
          name="a"
          type="checkbox" 
          class="radio" 
          id="rb-1" checked/> a </label> 
<!-- ... --->
      <label>
        <input [(ngModel)]="filterTag2.d" (ngModelChange)="filterByTag()"
        name="d"
        type="checkbox" 
        class="radio" 
        id="rb-2" checked/> d </label>
<!-- ... --->
      <label>
        <input [(ngModel)]="filterTag3.g" (ngModelChange)="filterByTag()"
        name="g"
        type="checkbox" 
        class="radio" 
        id="rb-3" checked/> g </label>
<!-- ... --->
 <div class="container" id="resultSearch">
         <div *ngFor="let rps of filteredTag" class="alert alert-primary" role="alert">
             <span class="tag1"> {{rps?.source.tag1}} </span> 
             <span class="tag2"> {{rps?.source.tag2}} </span>
             <span class="tag3"> {{rps?.source.tag3}} </span>        
         </div>
  </div>

Any help would be appreciated !