变量通过订阅获得值，但不显示前端

Question

我正在将Ludessetting组件路由到功能映射组件。 当我导航到功能映射组件中时，我通过订阅该字典将词典存储在命名feature22中。当我在控制台中打印时，我可以看到在功能22中存储了DIC，但此值未反映在HTML前端侧

component.feature-mappent.ts file

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { AlldataService } from '../alldata.service';
import { HeadingService } from '../heading.service';

@Component({
  selector: 'app-feature-mapping',
  templateUrl: './feature-mapping.component.html',
  styleUrls: ['./feature-mapping.component.css']
})
export class FeatureMappingComponent implements OnInit {
  heading:string="Rule Setting"
  features22:any={}
  features33:any =[]

  constructor(
    private allDataService:AlldataService,
    private headingService:HeadingService) { 
  }

  ngOnInit(): void {
    this.headingService.heading.emit(this.heading)
    console.log()
    this.allDataService.features22.subscribe(
      (data:any)=>{
        for(var key in data)
        {
          this.features33.push(key)
          // this.features22[key] = data[key];
        }
        // this.features22.push(...data)
        this.features22=data
        console.log("this is in rule setting")
        console.log(this.features22)
        console.log(this.features33)
      }
    )
    console.log(this.features22)
    console.log(this.features33)
  }

}

component.feature-mappent.html文件

<div class="row-custom">
  <div class="section-heading1">Feature List</div>
  <div class="container1-main">
    <div> {{features33}}</div>
    <div> {{heading}}</div>
  <div class="container1" *ngFor="let feature of features22| keyvalue">
    {{feature.key}}
    <table class="table table-borderless">
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody style="background-color: white;">
        <tr>
          <td scope="row" class="heading-tabledata">
            <div class="para">{{feature.key}}</div>
          </td>
          <td class="drag-tabledata">
            {{feature.value}}
          </td>
          
        </tr>
      </tbody>
    </table>
  </div>
</div>
</div>

[console] [1] [1]：https：//i.sstatic.net/odyd9.png

[在前端] [2] [2]：https：//i.sstatic.net/mgbno.png

如何在HTML前端显示功能22？