使用Angular在动态呈现的html中设置动态模板变量

Question

我正在使用角材料扩展面板显示动态渲染的树状结构，我自定义扩展面板以使用三元运算符在左侧显示下拉箭头，如下所示：

这就是我渲染扩展面板的方式：

父组件模板：

describe('refreshComponent', () => {
    it('should dispatch an event', () => {
      const document = { dispatchEvent: jest.fn() };
      wrapper.refreshGoalsComponent();
      expect(document.dispatchEvent).toHaveBeenCalledWith('refreshComponent');
    });
  });

子组件模板：

<div>
  <ui-tree [data]="data" [key]="key"></ui-tree>
</div>

我要在单击时更改标题，如果关闭，图标应指向右，如果打开，则指向下。 我该如何实现？