Question

我有一个带有下拉列表的primeng（角度2）对话框。我想在对话框显示时将焦点设置到下拉列表。问题似乎是我的div有条件地呈现。

我的代码：

<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>

在此代码中按钮工作正常，但onShow（）（*ngIf div之外）告诉我fe未定义。

如何访问*ngIf？

中的局部变量

Answer 1

是的，这是一个真正的痛苦。不幸的是，由于* ngIf的工作方式，它完全封装了所有内容（包括标签）。

这意味着使用ngIf在标签上或内部声明的任何内容都不会是＆＃34;可见＆＃34;在ngIf之外。

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

a）您可以使用@ViewChildren。这将为您提供一个可以订阅的QueryList，每当tempalte变量发生变化时（即ngIf打开或关闭），它将触发。

（html模板）

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

（ts代码）

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

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

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

b）您可以将@ViewChild与setter一起使用。每次ngIf改变时，这将触发setter。

（html模板）

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

（ts代码）

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

这两个例子都应该给你一个＆＃34;＆＃34;您现在可以在ngIf之外的模板中使用的变量。如果存在冲突，您可能希望将ts变量赋予模板（＃）变量的不同名称。

Answer 2

您可以在NgIf级别上分开使用模板：

<ng-container *ngIf="expression; else elseTemplate">

</ng-container>
<ng-template #elseTemplate>

</ng-template>

访问* ngIf中的局部变量

2 个答案: