以编程方式更新NGPrime面板的样式属性。

huangapple go评论82阅读模式
英文:

Programmatically update NGPrime Panel style property

问题

我对Angular还比较新,不确定我在TS或PrimeNG组件中是否做错了什么。

我有一个简单的响应式表单,我只是在提交时尝试更新一个样式属性。

我的面板组件从HTML中加载,包括自定义样式。

<p-panel header="No payment required.." [style]="{margin:'.5rem 2rem'}">

在组件的TS中,我使用ViewChild来获取它的引用。

@ViewChild(Panel, { static: false }) _Panel!: Panel;

我还尝试挂钩变更检测,但只是因为PrimeNG面板似乎没有更新?也许我不需要它?

@Component({
  changeDetection: ChangeDetectionStrategy.Default
})
constructor(private cd: ChangeDetectorRef) { }

在按钮点击事件中,_Panel对象确实更新了,但UI没有更新?

this._Panel.style = { display: 'none' };
this.cd.detectChanges();
this.cd.markForCheck();

我做错了什么?

英文:

I'm fairly new to Angular and not sure if I'm doing something wrong in TS or with the PrimeNG component.

I have a simple reactive form and all I'm trying to do is update a style property when submitted.

My panel component loads from HTML including the custom style.

&lt;p-panel header=&quot;No payment required..&quot; [style]=&quot;{margin:&#39;.5rem 2rem&#39;}&quot;&gt;

In the component TS I use ViewChild to get a handle on it.

@ViewChild(Panel, { static: false }) _Panel!: Panel;

I'm also trying to hook change detection BUT only because the PrimeNG panel doesn't seem to be updating? I may not need it?

@Component({
  changeDetection: ChangeDetectionStrategy.Default
})
constructor(private cd: ChangeDetectorRef) { }

During a button click event the _Panel object does update but the UI does not?

this._Panel.style = { display: &#39;none&#39; };
this.cd.detectChanges();
this.cd.markForCheck();

What am I doing wrong?

答案1

得分: 1

如果你只是想改变元素的可见性,我建议使用 *ngIf="..." 结构指令,并将其绑定到组件中的一个字段/属性上,根据需要将其设置为 truefalse,以控制其在 HTML 中的显示:

@Component({
    ...
    // 你不需要指定 changeDetection: ChangeDetectionStrategry.Default
})
export class MyFormComponent {
    ...

    panelVisible = true;


    myMethodThatChangesPanelVisibility(...) {
        this.panelVisible = false
    }
}
<p-panel *ngIf="panelVisible" header="No payment required.." style="margin: .5rem 2rem;"></p-panel>

另外,请注意,由于 style 属性内的表达式不会改变,所以你不需要在 style 属性上使用 Angular 属性指令绑定。因此,我从你上面的代码中删除了方括号和花括号。

英文:

If you are just trying to change whether it is visible or not, I would use the *ngIf=&quot;...&quot; structural directive, and bind that to a field/property in your component that you can just set to true or false depending on when you want it to show up in your html 以编程方式更新NGPrime面板的样式属性。

@Component({
    ...
    // You don&#39;t need to specify changeDetection: ChangeDetectionStrategry.Default
})
export class MyFormComponent {
    ...

    panelVisible = true;


    myMethodThatChangesPanelVisibility(...) {
        this.panelVisible = false
    }
}
&lt;p-panel *ngIf=&quot;panelVisible&quot; header=&quot;No payment required..&quot; style=&quot;margin: .5rem 2rem;&quot;&gt;

Also, notice that you don't need to use Angular attribute directive binding on the style attribute because the expression inside isn't going to change. So I removed the square brackets and curly brackets from what you had above.

huangapple
  • 本文由 发表于 2023年8月9日 05:01:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76863167.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定