使用“setAttribute('fxFlex', '25%')”更改组件中的 fxFlex 值在 Angular 6 中不起作用答案

【问题标题】：Changing fxFlex value in the Component with "setAttribute('fxFlex', '25%')" not Working in Angular 6使用“setAttribute('fxFlex', '25%')”更改组件中的 fxFlex 值在 Angular 6 中不起作用
【发布时间】：2019-07-26 17:03:44
【问题描述】：

我正在使用 flexLayout 模块（在https://github.com/angular/flex-layout 和https://alligator.io/angular/flex-layout/ 中查看更多内容）在我的 Angular 应用程序中构建响应式 div，我想从我的 Angular 组件中设置 fxFlex 属性的值。 component.ts 中的代码：

const nav = document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%');

html页面中的代码：

<div fxLayout>
<div id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1">hello</div>
<div id="nav1">word</div></div>

代码通常应该将大小布局更改为 5%，但事实并非如此，当我检查页面时发现属性已更改但布局仍然相同，奇怪的是当我更改它时在 html 代码中手动到 5%，我得到了我想要的结果。

我正在使用 Angular 6 和 Typescript 3.1.1

请，如果有任何建议，请不要犹豫。

谢谢！

【问题讨论】：

标签： html angular typescript frontend angular-flex-layout

【解决方案1】：

代码通常应该将大小布局更改为 5%

不，不应该。

Angular 指令用于 Typescript 或 预构建上下文。

当你写作时

document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%')

您指示 Javascript，它是 从 Typescript 编译的（因此在 构建后上下文中）获取元素并添加一个 Angular 指令 到你的属性。

问题是，代码已经编译好了，所以你不能将 typescript 添加到 Javascript，否则你将不得不再次编译它（我什至不确定你是否可以这样做）。

我建议您在使用之前了解角度特征及其工作原理。此外，如果您希望有人提供适合您情况的解决方案，请考虑发布Minimal, Complete, and Verifiable example。

【讨论】：

所以，你的意思是如果我在组件中使用 document.getElementById 属性 fxFlex 不会改变，但我不明白为什么当我检查我发现的 html 元素时属性 fxFlex 确实发生了改变'fxFlex=5%'
我根本没说过。我所说的是，您使用的 fxFlex 是 Angular 指令，而不是实际的 HTML 属性。
我现在明白了，现在的问题是如何在我的组件中更改指令 fxFlex 的值你知道吗？
带有属性绑定，[fxFlex]="condensed ? '5%" : '50%'"。考虑为此提出另一个问题，因为您原来的问题现在已经无关紧要了。

【解决方案2】：

在angular中，需要使用renderer2来动态设置属性。

示例：

HTML

<div #myDiv id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1"></div>

component.ts

import {ElementRef,Renderer2} from '@angular/core';

...

export class MyComponent implements AfterViewInit {

    @ViewChild('myDiv') el:ElementRef; // get the refernce of dom element.

    constructor(private rd: Renderer2) {}

    ngAfterViewInit() {
        // Update dom after view initialized.
        this.renderer2.setAttribute(this.el.nativeElement, "fxFlex", "5%");
    }

}

【讨论】：