标签: angular2-template
创建后立即关注输入
我希望在“激活”时集中输入。原因是我正在构建一个多步骤表单（就像这个），它有多个输入，我将一一展示。这就是我尝试过的。
解决方案1
@Component(
...
template: `<input *ngIf="myCondition" id="myId" (load)="myLoad()">`){
myCondition = false;
load(){
document.getElementById("myId").focus();
}
}
当 myCondition 后来变为 true 时， (load) 事件不会被触发，在我看来，这是这种情况下最合乎逻辑的 DOM 事件。
解决方案2
someFunction(){
this.myCondition = true;
document.getElementById("myId").focus();
}
这会失败，因为输入元素尚未加载： document.getElementById("myId") returns undefined。setTimeOut如果我设置大约 100 毫秒，它确实可以工作，但这不是一个非常优雅的解决方案，并且不同客户端的理想超时会有所不同。
关于在 DOM 中加载输入时如何实现输入焦点还有其他想法吗？
推荐指数
解决办法
查看次数
如何在 angular2 模板中使用 Electron 的 webview html 元素？
我看到这个问题：How to use Electron's <webview> inside Angular2 app?
\n\n它让我克服了最初的错误，但现在我看到了
\n\nzone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors:\n\'webview\' is not a known element:\n1. If \'webview\' is an Angular component, then verify that it is part of this module.\n2. If \'webview\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"></pdf-viewer-->\n [ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>\n </div"): PaperComponent@45:12 ; Zone: <root> ; Task: Promise.then ; …推荐指数
解决办法
查看次数
Angular 2 Dart：如何从组件内部添加主体类？
我的 Angular 2 Dart 应用程序有许多嵌套组件。如果我的组件之一的某个属性设置为 true，则会显示一个弹出窗口。
如果显示此弹出窗口，我想向文档正文添加一个类。
伪代码示例：
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
原因很简单：如果显示弹出组件，我想禁用正文滚动 ( overflow-x:hidden;)。bool show_popup如果其中的属性popup_component.dart设置为 true，则会显示弹出组件。
不幸的是，在 CSS 中 - 据我所知 - 没有选择器来检查这个（是否有 CSS 父选择器？） - 否则我会说类似的话
body:has(.my_popup)
在 main.css 文件或类似的文件中。
我怎样才能达到预期的结果？
推荐指数
解决办法
查看次数
无法读取未定义的角度 2 的属性“用户名”
我尝试了很多解决方案，但没有一个能帮助我解决这个问题......无法弄清楚我的代码中有什么问题......
HTML 代码 ::
<input type="text" class="form-control" placeholder="Please Enter Your Username" [(ngModel)]="currentUser.UserName" minlength="3" required id="userNameBox" name="UserName" #uName="ngModel">
组件代码 ::
profile() {
let uid = Number(sessionStorage.getItem('id'));
this._homeService.profile(uid).subscribe(
res => {
this.currentUser = res
console.log(this.currentUser);
});
服务 ：：
profile(id: number) {
return this._http.get(url, id).map(
(res: Response) => {
console.log(res.json())
return new User(res.json()
) }
).catch(this.handleError);
}
模型 ：：
export class User {
constructor(json: any) {
if (json != null) {
this.Id = json.Id;
this.UserName = json.UserName;
this.FirstName = json.FirstName;
this.LastName = json.LastName; …推荐指数
解决办法
查看次数
由于 ngIf 保持对组件的引用隐藏
我有一个问题 div，它使用 ngFor 生成一些子组件。这些子组件具有用于数据的输入字段。当用户在这些字段中输入数据并单击下一个按钮时，问题 div 会被 ngIf 隐藏并显示预览 div。当再次按下后退按钮时，预览 div 会与 ngIf 一起隐藏并出现问题 div。但是因为问题 div 中的子组件再次创建，所以输入字段中的数据消失了。以下是我的html
<!-- questions
div-->
<div class="questions activity_screen" *ngIf="showquestions">
<div *ngFor="let component of components;let i=index">
<app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost>
</div>
<a class="submit_button" (click)="getdata()">Submit</a>
</div>
<!-- preview div-->
<div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf">
<button (click)="goback()">go back</button>
</div>
如何保持这些组件的先前状态，以便在按下后退按钮后再次出现问题 div 后数据不会丢失！
angular2-forms angular2-directives angular2-template angular
推荐指数
解决办法
查看次数
如何在输入焦点上动态控制Angular 2+中父元素的类？
我有一系列位于元素内部的输入框，我想让输入框的父元素根据鼠标的聚焦位置单独设置一个边框。代码如下所示：
HTML（只是输入元素之一，因为它们都以相同的方式编码）：
<div class="parent-element">
<input type="text"
[class.bordered]="myBooleanVariable"
(focus)="addBorder()"
(blur)="removeBorder()"
/>
</div>
打字稿：
addBorder() {
this.myBooleanVariable = true;
}
removeBorder(event) {
this.myBooleanVariable = false;
}
我遇到的问题是，当在bordered上应用该类时focus，所有.parent-elementdiv 都会获得边框，因为myBooleanVariable它要么是 true，要么是 false。我希望避免静态变量一样myBooleanVariable1，myBooleanVariable2等
我怎样才能做到这一点？
推荐指数
解决办法
查看次数
Angular 4：模型更改后视图没有更新？
我的应用程序中有两个，component即：HeaderComponent& TestComponent。中HeaderComponent，有一个方法名称setUserData()。我从file 中的TestComponent 方法调用setUserDate()。ansSubmit()test.component.ts
现在setUserDate()正在召唤，价值正在进入setUserDate()方法。
问题是：调用时setUserDate()，我将分值设置为this.userData.score，并且this.userData.score值在视图（ HTML ）中绑定，但来自
TestComponent 的方法 ansSubmit() 的传入值不会在查看但该值存在于ts文件中（我正在控制台中打印）。
这是代码：
测试.组件.ts：
import { HeaderComponent } from '../../components/header/header.component';
@Component({
selector: 'test-page',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css'],
providers: [HeaderComponent]
})
export class TestComponent implements OnInit {
private userData: any = {};
constructor(private _router: Router, private headerComponent: HeaderComponent) { }
ansSubmit() {
const …model angularjs-scope angular2-directives angular2-template angular
推荐指数
解决办法
查看次数
错误：初始化后无法更改选择的“多重”模式
错误图像：
<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'">
<div class="pb-1">
<md2-select placeholder="{{'WidgetType'|translate:lang}}" class="input_custom_width"(change)="widgetNode($event.value)" required>
<md2-option *ngFor="let widgetType of widgetTypeAry" [value]="widgetType.value">
{{widgetType.name}}
</md2-option>
</md2-select>
</div>
</div>
<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="fieldsObj['node'] && showRequestAction" >
<div class="pb-1">
<md2-select placeholder="{{'Node'|translate:lang}}" [formControl]="editWidgetForm.controls['nodeId']" [(ngModel)]="nodeId" class="input_custom_width" [(multiple)]="isMultiNode" (change)="nodeChange($event.value)" required>
<md2-select-header>
<md-input-container class="input_custom_width">
<input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchNode"/>
</md-input-container>
</md2-select-header>
<md2-option *ngFor="let node of nodesAry | filterPipe : searchNode" [value]="node.value">
{{ node.name }}
</md2-option>
</md2-select>
<small *ngIf="editWidgetForm.controls['nodeId'].hasError('required') && editWidgetForm.controls['nodeId'].touched" class="mat-text-warn">{{'nodeReq'|translate:lang}}</small>
</div>
</div>
当我在 select 下拉列表中使用 multiple …
html angular2-forms angular2-template angular angular4-forms
推荐指数
解决办法
查看次数
Angular ：ngFor 数据项并在为空时显示自定义消息
我正在循环我的数据列表并在视图中显示，作为 spans 标签：
<span *ngFor="let d of myData; last as isLast">
{{d.name}}
<span *ngIf="!isLast">,</span>
</span>
如您所见，我添加了一个逗号 '**, betewen items values
这看起来像这样 ::
AAA,BBB,CCC,DDD,
但碰巧我的数据是空的：所以我想显示一些自定义字符串： "NO ITEMS"
我想在 html 部分用管道处理它
建议？
推荐指数
解决办法
查看次数
在模板中调用函数会导致 Angular2+ 中的性能问题吗？
Angular 的变更检测实现我还是比较习惯的，不清楚在模板中调用函数是否会导致性能问题。
例如，执行以下操作是否更糟：
<mat-tab-group>
<mat-tab label="First"> {{ getFirstTab() }} </mat-tab>
<mat-tab label="Second"> {{ getSecondTab() }} </mat-tab>
</mat-tab-group>
比做：
<mat-tab-group>
<mat-tab label="First"> {{ firstTabContent }}</mat-tab>
<mat-tab label="Second"> {{ secondTabContent }}</mat-tab>
</mat-tab-group>
关于什么：
<button *ngIf="shouldShowButton()" .... >
推荐指数
解决办法
查看次数