Angular 6 属性中字符串插值的最佳实践是什么？
我有这个代码：
<div class="container" [ngStyle]="{'grid-template-rows': 'repeat(' + value + ', 1fr) [last-line]'}">
我想使用类似 'repeat(${value})'反引号的东西
我正在使用 ng Smarttable 并通过事件更改数据源数组（更改是数组内值的 id 更改）。问题是 angular 无法检测到更改，并且在我将鼠标悬停在页面上或单击某处之前没有任何反应。
因此，更改在幕后正确应用，并且一旦我单击某处，angular 就会“看到”这些更改。
所以我可以手动点击很多次来查看 chaning 属性，但这不是我们想要的。
我试过：
有可能有这样的东西吗？
this.renderer.refresh();
还是仅使用 ng smartable 的功能？
编辑：看起来问题出在我这边。当您“刷新”智能表时，您会得到一个承诺，该承诺仅在加载完成后执行。
我没有使用承诺。将正常的 DetectChange() 放在承诺中使其工作
单击复选框时，我会显示一个带有两个按钮的模式，接受和不接受。仅当选中接受按钮时才应选中该复选框。
出于测试目的，我尝试创建此复选框
<input type="checkbox" (change)="foo()" [checked]="false">
期望它执行我的组件的 foo 方法但从未被检查。问题是它被检查了！我来自 React 背景，这非常令人沮丧。
知道我做错了什么吗？
我也尝试过
<input type="checkbox" name="show_recurrency" (change)="foo()" [(ngModel)]="checkout.recurrency" id="show_recurrency" />
foo(e) {
e.preventDefault();
console.error('foooooooooooooooo', e);
this.checkout.recurrency = false;
return;
}
问候，
Angulars文档解释说，结构指令，例如<p *ngIf="a as b"></p>“脱糖”到<p [ngIf]="a" [ngIfAs]="b">.
脱糖使用microsyntax，允许表达式如下
let node; when: hasChild
a as b
let x of y; index = i; trackBy: f
该文档提供了一些微语法示例，并建议研究 的来源ngIf，但没有提供正式定义。
angular 结构指令的微语法的语法是什么？
我在 Angular 组件上有以下可观察的内容：
count$: Observable<number>;
this.count$ = this.getCount();
通过使用以下内容，我得到值 0（零）；
this.count$.subscribe(x => console.log(x));
在模板上我有：
<a routerLink="/dash" *ngIf="(count$ | async)">
<ng-container *ngIf="count$ | async as count">
Count: {{count}}
</ng-container>
</a>
如果count$是 1，我得到Count: 1，但如果count$是 0，内容Count: 0甚至不会呈现。
知道为什么吗？
在我的角度应用程序下
我使用此代码来设置自定义正文样式：
constructor(private elementRef: ElementRef) { }
ngOnInit() {
this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden';
}
对于某些特定的场景我必须添加“重要”
这会是这样的：
this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden !important';
但这是行不通的，并且“重要”没有添加到样式中。
要注意 ; 因为我需要将其应用于主体本身，而不是应用于组件之外的特定 html 元素，所以 ngStyle 无法做到这一点。
建议？？
我正在尝试以 Angular 方式进行动画回调，但出现了类型错误，可以使用 type 轻松抑制该错误any。我想了解为什么AnimationEvent打字稿不接受。
我的组件：
import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from "@angular/animations";
@Component({
selector: 'app-animation-callback',
animations: [
trigger('openClose', [
state('open', style({
height: '200px',
})),
state('closed', style({
height: '100px',
})),
transition('open <=> closed', [
animate('.1s')
]),
]),
],
template: `
<nav>
<button (click)="toggle()">Toggle</button>
</nav>
<div
[@openClose]="isOpen ? 'open' : 'closed'"
(@openClose.start)="onAnimationEvent($event)"
(@openClose.done)="onAnimationEvent($event)"
class="open-close-container">
Text
</div>
`,
})
export class AnimationCallbackComponent {
isOpen = true;
toggle() {
this.isOpen …我有一个子组件，它将 type 作为输入
子组件：
export enum PersonTypes {
MALE = 'male',
FEMALE = 'female'
}
@Component({
selector: 'app-child'
})
export class ChildComponent {
@Input() type: PersonTypes;
}
父组件：
@Component({
selector: 'app-parent'
})
export class ParentComponent {
}
在父组件视图模板中：
<div>
<app-child [type]="PersonTypes.MALE"></app-child>
<app-child [type]="PersonTypes.FEMALE"></app-child>
</div>
那么，问题是如何在模板中传递不同的枚举值？我发现一个答案说我们需要在父组件中创建一个新变量，然后将该值分配给模板中的“type”，如下所示。
@Component({
selector: 'app-parent',
template:` <div>
<app-child [type]="malePerson"></app-child>
<app-child [type]="femalePerson"></app-child>
</div> `
})
export class ParentComponent {
malePerson = PersonTypes.MALE;
femalePerson = PersonTypes.FEMALE;
}
对我来说，这是一个过度的解决方案，如果我们有 10 个枚举属性，我们最终创建 10 个局部变量并在模板中分配它们太多了。
有更好的解决方案吗？
我试图在另一个文件中定义枚举,以便在其他地方使用它.例如在html视图上.这可能吗？
enums.model.ts
export enum MyEnum{
First = 1,
Second= 2
}
我-summary.component.ts
import {MyEnum} from "./app/models";
@Component({
selector: "my-summary",
templateUrl: "./my-summary.component.html"]
})
export class MySummaryComponent{ }
我-summary.component.html
<div>
{{MyEnum.First}}
</div>
它不起作用.模块'"path/app/models/index"' has no exported member 'MyEnum'.
我正在尝试通过典型的Angular方式通过ngModel绑定到输入字段类型文件：
<input type="file" id="fileUpload" [(ngModel)]="file">
和
files:any
我的问题是选择文件后，变量的值files仍然是undefined
此处的stackblitz示例：https ://stackblitz.com/edit/angular-6mbdww