标签: angular-template

我们正在使用grunt-html-angular-validateHTML棉绒包。它在后台使用W3C 在线验证器工具，到目前为止，它在验证我们的角度模板方面做得很好。

今天，它在检查从存储库中提取的最新更改时失败，并显示以下错误：

验证src / login / login.html ...错误[L37：C108]

属性自动聚焦在元素输入上的值{{regCodeRequired}}无效。

这是失败的相关行：

<div class="auth-reg-code-block" ng-if="regCodeRequired">
    <input class="form-control" type="text" name="regCode" 
           id="regCode" ng-model="user.regCode" autofocus="{{regCodeRequired}}" 
           placeholder="Registration Code" required>
</div>

基本上，这是用于输入用于两因素验证的注册码的字段。regCodeRequired是一个布尔变量，true一旦用户通过了第一个登录/密码验证步骤，该变量就会设置为。

而且我看到输入侧重于输入（使用chrome 39）-它正在工作。

题：

我很确定验证工具有理由抱怨，但我不确定如何进行。我们使用autofocus属性不正确吗？我们应该如何解决验证错误？

我已经遍历了W3C验证程序错误，试图找到一种解释，但是那里什么autofocus也没有。另外，w3cjsgithub仓库中什么也没有。

这是以下配置htmlangular：

htmlangular: {
    options: {
        relaxerror: [
            'Element head is missing a required instance of child element title.',
            'Attribute href without an explicit value seen.',
            '& did not start …

我来自Laravel世界,对Angular 2世界有点新意,我很难弄明白:

是否可以覆盖Angular 2中的组件或模板,就像我们用来覆盖Laravel中供应商/自定义包的视图一样？

这是一个虚拟文件夹结构,可能表达我的意思:

|-resources
   |-assets
      |-typescript
         |-core
            |-core.component.ts    //overridded core component and template
            |-core.template.html
|-Modules
   |-Core
      |-Resources
         |-assets
            |-typescript
               |-core
                  |-core.component.ts  //main module component and template
                  |-core.template.html

core.template.html(原创)

<div>
    <p> This is a core component's template</p>
    <button>Click me! </button>
</div>

core.template.html(重写)

<div>
    <p> This is a overridden core component's template</p>
    <p> Removed the button and overridden with p-tag </p>
</div>

希望我已经清楚地说明了我面临的问题.

然而非常基本的事情,但我无法弄清楚如何在angular2中的html模板中显示字符串数组.

html的

<ul>
       <li *ngFor="#number of numberOptions">
          {{number}}
       </li>
</ul>

.TS

this.numberOptions= ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"];

以上技巧是不是为我工作,文本编辑器显示错误#number在ngFor.这是否在新版本中被弃用？或者我在这里做错了什么？

我有类似的东西

<div ngNonBindable>
  yada yada.... { ... }  blah blah....
<div>

即使使用“ ngNonBindable”指令，我也会收到错误：

compiler.es5.js:1690 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
<div>

两件事情：

1）请指出正确的方向。

2）或者，请采取一种解决方法。

我有很多html表共享相同的15列以及特定于每个表的自定义列.我想创建这些常见的15列作为一个组件,它接收一组数据并显示为没有包装器的15 td.我无法弄清楚如何创建一个Angular组件,它不会在DOM中显示包装器标签,并允许我传入输入.以下是我想做的事情:

<tr *ngFor="let item of items">
  <td>Column 1</td>
  <my-common-columns [data]="item"></my-common-columns>
  <td>Another column</td>
</tr>

不幸的是,使用上面的代码,<my-common-columns>标记显示在渲染的DOM中,这会弄乱表格.我只能td在tr标签下面.

我也试过,<ng-container *ngComponentOutlet="myCommonColumns">因为ng-container没有出现在DOM中,但我无法弄清楚如何传入data它.

问题

Angular 是否旨在不断重新检查所有内容以检测更改？我来自 React 世界，我期待像event triggered -> re-rendering. 我不知道这是来自我的应用程序还是来自 Angular。

如果我有一个从 HTML 模板调用的方法，即使我的组件中没有任何更改，它也会被无限调用。

问题

我有一个类似日历的页面，它加载了大量数据，并且必须在渲染之前进行计算，因为用ngIf指令来做这些事情太困难了。所以我的模板中有如下内容：

<div [innerHTML]="_getDayPrice(item, day) | safeHtml"></div>  

如果我在_getDayPrice方法中控制台记录一些东西，它会被无限打印。

我试过的

1. 我已经通过ChangeDetectionRef在我的应用程序中手动注入并执行this.cdRef.detach(). 然而，这感觉很糟糕，因为有时我可能需要重新启用它并再次分离。

2. 我试图调查它是否来自我的父组件应用程序，比如容器。我在我的主 app.component 中渲染了一个 div ，<div class={{computeClass()}}>并在该方法中打印了一个控制台日志，果然它被无限调用。因此，在此之后，我尝试注释掉所有应用程序的服务。如果全部都被注释掉了，它就可以正常工作，但也没有可观察到的数据。我已经调查了大约半天，但没有发现单点故障（比如注释掉这个服务可以解决所有问题）。

3. 使用 chrome 的内置性能选项卡记录性能，但再次从我的代码中找不到任何触发更改的内容。zone.js被反复调用并似乎设置了一个持续发射的间隔。

4. 当然，我已经搜索了服务中的setTimeout和setInterval，但找不到可能导致此问题的不断变化的内容。

结论？

底线是：如果您有一个复杂的 Angular 应用程序并从模板中调用一个方法，以便无限调用该方法，这是否正常？

如果没有，您对可能导致这种情况的原因有任何提示吗？或者有什么其他方法可以绕过它而不是分离 changeRef 检测器？

我唯一关心的是性能。这是一个类似于日历的页面，可以呈现多行，并且在 8GB RAM 的笔记本电脑上严重滞后。我很确定平板电脑或手机几乎会死机。

this.child02.nativeElement 未定义，我不知道为什么。我究竟做错了什么？谢谢你。这是我目前的堆栈闪电战。

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

switchDirection = true;
head: ElementRef;

@ViewChild('child02') child02: ElementRef;

  onScroll(event: Event) {
    console.log("viewBoundaryL:" + (event.target as HTMLElement).scrollLeft);
    if((event.target as HTMLElement).scrollLeft >= 50 && this.switchDirection === true){
  console.log("nativeElement:" + this.child02.nativeElement)
  console.log(this.child02)
  console.log('snap')
this.child02.nativeElement.scrollIntoView({ behavior: 'smooth' });
  this.switchDirection = false;
    }
  }
}

app.component.html：

Keep an eye on the console while scrolling...
<div class="container"  (scroll)="onScroll($event)" >

<child1></child1>
<child2 #child02></child2> …

我的表单组结构如下所示（order.component.ts）：

this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});

在模板（order.component.html）中，我有：

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <fieldset formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text" formControlName="name" class="form-control" name="name" id="name" required>
    <small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid && (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)">Name invalid</small>
  </fieldset>
  ...
</form>

这是有效的，但是一种更短的表达方式orderForm.controls['customer'].controls['name']吗？例如，将 *ngIf 条件设为更简洁"name.invalid && (name.dirty || name.touched)"

在我的 Angular 应用程序中，我收到以下错误：

对象可能为“空”。

问题是我收到这个错误不是因为一些打字稿代码，而是因为这个 html 模板：

  <form [formGroup]="form">
    <timepicker [formControlName]="'myControl'"></timepicker>
  </form>

  <br>
  <button class="btn btn-succes" (click)="form.get('myControl').enable()">Enable Control</button>
  <button class="btn btn-warning" (click)="form.get('myControl').disable()">Disable Control</button>
  <br><br>

  <pre class="alert alert-info">Time is: {{ form.get('myControl').value }}</pre>

简而言之，我有一个用作文本输入的组件。父组件使用@Input绑定将数据传递给该组件。当通过@Output绑定触发更改事件时，我会在父组件中执行一些自动验证。这是为了删除错误的值并用一些合理的默认值替换它们以获得更好的用户体验。

这是父组件的基本版本

@Component({
    selector: 'parent',
    template: `
    <div>
        <child [value]="item.key1"
               (valueChange)="onValueChange($event)">
            </child>
    </div>
    `
})
export class Parent {
    item = {
        key1: 'test value',
        key2: 'another test value'
    };

    onValueChange(newValue) {
        // Perform some validation and set default
        if (newValue.length > 4) {
            newValue = newValue.substring(0, 4);
        }

        this.item.key1 = newValue;
    }
}

和子组件

@Component({
    selector: 'child',
    template: `
    <div>
        <input type="text"
               [(ngModel)]="value"
               (blur)="onBlur($event)" />
    </div>
    `
})
export class Child {
    @Input() value: string; …