标签: angular2-template

我的 Angular 7 模板中有以下代码行

<span>{{process.env.CLIENT_ID}}</span>

我想在{{process.env.CLIENT_ID}}过期时禁用插值，以便它应该在浏览器中呈现以下文本。

{{process.env.CLIENT_ID}}

是否可以在不将其作为字符串存储到变量中的情况下实现这一目标？

data-label我想向每个元素添加属性td以使表格响应式。它必须始终根据用户语言正确翻译，因此我想从th变量中获取它。

模板

<div class="p-3" *erzLet="state.entries$ | async as entries">\n  <ng-container *ngIf="!(state.loading$ | async); else loading">\n    <ng-container *ngIf="entries && entries.length > 0; else noEntries">\n      <table class="table">\n        <thead>\n          <tr>\n            <th scope="col">\n              {{ \'evaluate-absences.list.header.student\' | translate }}\n            </th>\n            <th>{{ \'evaluate-absences.list.header.total\' | translate }}</th>\n            <th>\n              {{ \'evaluate-absences.list.header.valid-excuse\' | translate }}\n            </th>\n            <th>\n              {{ \'evaluate-absences.list.header.without-excuse\' | translate }}\n            </th>\n            <th>\n              {{ \'evaluate-absences.list.header.unconfirmed\' | translate }}\n            </th>\n            <th>{{ \'evaluate-absences.list.header.late\' | translate }}</th>\n            <th>{{ \'evaluate-absences.list.header.halfday\' | translate }}</th>\n          </tr>\n        </thead>\n …

我的模板包含一个动态列表:

<ol>
  <li #nameitem *ngFor="let name of names; let i = index" class="classA"     
      (click)="handleClick(i)">{{ name }}</li>
</ol>

我想在用户点击它时更改项目的CSS类.我已经尝试使用的特性MouseEvent,如target和currentTarget,但EventTarget不提供访问类列表.所以我尝试将列表元素作为视图子元素获取:

@ViewChildren("nameitem") private nameItems: QueryList<ElementRef>;

这也不起作用.在事件处理程序中,本机元素是未定义的:

private handleClick(i: number) {
  console.log(this.nameItems[i].nativeElement.classList.length);
}

我得到的错误是:Cannot read property "nativeElement" of undefined.有什么想法吗？

谢谢

我还没有找到任何重构我的ngFor循环的例子.这是我从角度2 beta.08开始的循环

  <template ngFor #row [ngForOf]="filterRows">

我的数据看起来像这样

this.data = [[1,2,3], [4,5,6]];

我想把每个值1..6放在<td>一个表的标签中.

我的问题是,外部循环需要在某种标签内,但我不想破坏HTML结构.我目前的解决方案如下:

<table>
    <tr>
        <dummy *ngFor="let a of data;">
            <td *ngFor="let b of a;">
                {{b}}
            <td>
        <dummy>
    </tr>
</table>

没有与之相关的组件<dummy>.

这有效,但我怀疑这是这样做的预期方式.任何替代品？

如何获得角度2的索引但增加1：

<li *ngFor="let mPrepTasks of project.upcomingMeetingsPrepTask; let i= index; let count = i+ 1;">
   <p>Index {{count}}</p>
</li>

我有两个独立的模块app.module.ts,core.module.ts用于加载两个选择器app和app-main.

文件夹结构如下:

|main.ts
|-App
|  |-app.module.ts
|  |-Components
|    |-app.component.ts
|
|-Core
|  |-core.module.ts
|  |-Components
|    |-core.component.ts

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './App/app.module';
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '../Core/core.module';
import { AppComponent } from './Components/app.component';
@NgModule({
    imports: …

我想在angular2当前版本(V2.2.0)中使用另一个组件内的组件

但之前我们可以选择使用以下代码在另一个组件中使用组件.

import { AnotherComponent } from './another-component';

@Component({
  selector: 'my-component',
  directives: [AnotherComponent],
  template: '<div>Something there<another></another></div>'
})
export class OtherComponent {
}

但是,当我尝试相同它不起作用时,它会抛出模板编译错误.

此功能现已删除吗？或者有另一种方法可以做同样的事情吗？

错误信息

1. 如果'navigation'是Angular组件,则验证它是否是此模块的一部分.
2. 如果'navigation'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("

这只是表单中的一个基本输入元素，我需要设置其默认初始值。

<input type="number" name="interest_rate" [(ngModel)]="interest_rate">

在我的代码中，我添加了

this.form.controls['interest_rate'].patchValue(this.assumptions.interest_rate*100);

但是我越来越

Error: Error in :0:0 caused by: Cannot read property 'patchValue' of undefined

我有一个文本框，我想在某些情况下设置为只读，在少数情况下设置为可编辑字段，因此该字段应根据条件在只读/可编辑之间切换，如何实现？