在 *ngIf 中访问局部变量 [英] access local variable within *ngIf

问题描述

我有一个带有下拉菜单的primeng(angular 2)对话框.当对话框显示时，我想将焦点设置在下拉菜单上.问题似乎是我的 div 是有条件地呈现的.

我的代码:

<div *ngIf="selectedItem"><button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button><p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown>

</p-对话框>

在这段代码中，按钮工作正常，但 onShow()(在 *ngIf div 之外)告诉我 fe 未定义.

如何访问*ngIf中的局部变量?

解决方案

是的，这真的很痛苦.不幸的是，由于 *ngIf 的工作方式，它完全封装了内部的所有内容(包括它所在的标签).

这意味着在带有 ngIf 的标签上或内部声明的任何内容都不会在 ngIf 之外可见".

你甚至不能简单地在 ts 中放置一个 @ViewChild，因为在第一次运行时它可能不存在......所以这个问题有 2 个已知的解决方案......

a) 您可以使用@ViewChildren.这将为您提供一个您可以订阅的 QueryList，它会在每次模板变量更改时触发(即 ngIf 打开或关闭).

(html 模板)

{{thing.stuff}}
<my-component #thing></my-component>

(ts 代码)

@ViewChildren('thing') thingQ: QueryList;东西:我的组件；ngAfterViewInit() {this.doChanges();this.thingQ.changes.subscribe(() => { this.doChanges(); });}doChanges() {this.thing = this.thingQ.first;}

b) 您可以将 @ViewChild 与 setter 一起使用.每次 ngIf 更改时，这都会触发 setter.

(html 模板)

{{thing.stuff}}
<my-component #thing></my-component>

(ts 代码)

@ViewChild('thing') set SetThing(e: MyComponent) {this.thing = e;}东西:我的组件；

这两个示例都应该为您提供一个事物"变量，您现在可以在模板中使用 ngIf 之外的变量.您可能希望为 ts 变量指定一个与模板 (#) 变量不同的名称，以防发生冲突.

I have a primeng (angular 2) dialog with a dropdown. I want to set focus to the dropdown when the dialog shows. The problem appears to be that my div is rendered conditionally.

My code:

<p-dialog (onShow)="fe.applyFocus()">
  <div *ngIf="selectedItem">
    <button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button>
    <p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown>
  </div>
</p-dialog>

In this code the button works fine, but the onShow() (outside the *ngIf div) tells me fe is undefined.

How can I access the local variable inside the *ngIf?

解决方案

Yes, this is a real pain. Unfortunately, due to the way *ngIf works, it completely encapsulates everything inside (including the tag it's on).

This means anything declared on, or inside, the tag with the ngIf will not be "visible" outside of the ngIf.

And you can't even simply put a @ViewChild in the ts, because on first run it might not be present... So there are 2 known solutions to this problem...

a) You can use @ViewChildren. This will give you a QueryList that you can subscribe to, which will fire off every time the tempalte variable changes (ie. the ngIf turns on or off).

(html template)

<div>{{thing.stuff}}</div>
<my-component #thing></my-component>

(ts code)

@ViewChildren('thing') thingQ: QueryList<MyComponent>;
thing: MyComponent;

ngAfterViewInit() {
    this.doChanges();
    this.thingQ.changes.subscribe(() => { this.doChanges(); });
}

doChanges() {
    this.thing = this.thingQ.first;
}

b) You can use @ViewChild with a setter. This will fire the setter every time the ngIf changes.

(html template)

<div>{{thing.stuff}}</div>
<my-component #thing></my-component>

(ts code)

@ViewChild('thing') set SetThing(e: MyComponent) {
    this.thing = e;
}
thing: MyComponent;

Both of these examples should give you a "thing" variable you can now use in your template, outside of the ngIf. You may want to give the ts variable a different name to the template (#) variable, in case there are clashes.

这篇关于在 *ngIf 中访问局部变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！