Question

在新的Angular Material Tree组件中，这是示例中使用的标记的一部分（Angular Material tree with flat node example）：

<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.filename}} : {{node.type}}
</mat-tree-node>

请注意，mat-icon标记内部有一个插值，用于确定要显示的图标。

我在我的项目中使用字体很棒而不是Material Design图标，所以我试图找到一种方法来使树组件与字体真棒图标一起工作。

到目前为止，我已尝试将mat-icon标记替换为以下内容：

<i class="{{treeControl.isExpanded(node) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'}}"></i>

我也尝试过注册Font Awesome，以便我可以使用它：

<mat-icon fontIcon="{{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}"></mat-icon>

在这两种情况下，最初都会显示V形图标右键，然后单击以展开图片，但图标不会更改。但是，如果我展开几个级别，然后折叠顶级，然后再次展开顶级，所有较低级别显示正确的图标（雪佛龙向下）。

似乎treeControl.isExpanded(node)未在预期时间执行（单击图标按钮时）。有没有解决这个问题的方法？

这是一个用于演示问题的stackblitz：https://stackblitz.com/edit/angular-fx4glo?file=app%2Ftree-flat-overview-example.html

Answer 1

角度属性和插值

这很正常。在属性值中插入插值时，例如

class="{{ myFunction() }}"

Angular只会调用myFunction()一次（创建元素时）。

这里需要的是属性绑定（又称单向数据绑定），即将属性括在方括号中。

请注意，它不会带有class属性的开箱即用：要将值绑定到class属性，您可以使用[ngClass]指令，像这样：

<i class="fas" [ngClass]="{'fa-chevron-down':treeControl.isExpaned(node), 'fa-chevron-right':!treeControl.isExpaned(node) }"></i>

解决方案：库干扰

在这种情况下的问题是，你使用的是FontAwesome的JS版本 - 在大多数情况下工作正常，但在动态更改图标类时则不行。

使用FontAwesome的经典css字体风格解决了这个问题，即添加了您找到的链接here而不是脚本。

请在这里查看分叉的Stackblitz：https://angular-fx4glo-2mjlrg.stackblitz.io

参考：Property binding，ngClass directive

Answer 2

Font Awesome 5（SVG）解决方案：

.html

state = {
  username: '',
  items:[]
};

handleFormSubmit = (e) => {

  e.preventDefault();
  let items = [...this.state.items];
  items.push({
    username: this.state.username
  });
  this.setState({
    items,
    username: '',
  });
};

handleInputChange = (e) => {
  this.setState({
    username: e.target.value
  })
}

render() {

  return (
    <>
      <div className="container">
        <form className='from-group ' onSubmit={this.handleFormSubmit}>

          <input className='form-control no-border input-field ' id="username" value={this.state.username} type="text" name="username" onChange={this.handleInputChange} required/>

          <div className="text-center">
            <button type='submit' className="mt-3 col-md-12 btn  btn-primary">ADD</button>
          </div>
        </form>
        <div className='mt-3'>
          <div className='center'>
            <table className="table table-dark table-hover">
              <tbody>
                <tr>
                  <th>Username</th>
                </tr>
                {this.items.map(item =>{ 
                return(
                  <tr>
                    <td>{item.username}</td>
                  </tr>
                  ); 
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}
};

.ts

<ng-container *ngFor="let socialItem of socialItems">
    <a
      href="{{ socialItem.url }}"
      target="_blank"
      attr.aria-label="{{ socialItem.name }}. Click here to check our {{ socialItem.name }}."
      role="menuitem"
      title="{{ socialItem.name }}"
      ><fa-icon [icon]="socialItem.icon"></fa-icon>
    </a>
</ng-container>

假设已执行所有步骤here，以导入带有图标的FontAwesome模块，则它可以正常工作。

图标的角度插值不适用于字体真棒

2 个答案:

角度属性和插值

解决方案：库干扰