在 Angular2 中为 Dart 组件的视图正确使用 Elvis 运算符

Question

我在 Angular2 Dart 中看到 Angular for Dart Cheat Sheet (v2.0.0-beta.2) 支持 Elvis 运算符。

我正在尝试在组件视图中使用它，但似乎不允许在此处使用。

给定

.html

  <div
    <label
        for = "first">First<span class = "require">*</span></label>
    <input
        type = "text"
        [(ngModel)] = "name?.first"
        id = "first">

.飞镖

...
Name name = new Name();
...

运行应用程序出现以下错误：

错误跟踪

Transform TemplateCompiler on 
epimss_ng2_reg|lib/components/name_component.ng_meta.json threw error: Template parse errors:
Parser Error: The '?.' operator cannot be used in the assignment at column 13 in [name?.first=$event] in NameComponent@39:12 ("
        <input
            type = "text"
            [ERROR ->][(ngModel)] = "name?.first"
            #firstCtrl = "ngForm"
            [ngFormControl] = "nameForm"): NameComponent@39:12

什么情况下可以使用组件视图中的运算符？

干杯

Answer 1

正如错误信息所说，它不能用于赋值。当name为null时，应该把值赋给哪里呢？如果您将简短形式拆分为更明确的形式

[ngModel]="name?.first" (ngModelChange)="name.first=$event"

那你就可以使用猫王运算符了。

Answer 2

在name为空的情况下你也可以这样做

<input type="text" *ngIf="name" [(ngModel)]="name.first">

Answer 3

转到 component.ts class 并将模型的属性初始化为 "" 或任何适当的默认值。

ngOnInit() 方法是个好地方。

这对我有帮助 Angular 5.

Answer 4

您可以使用 *ngIf，但有时会失败。

<input type="text" *ngIf="name" [(ngModel)]="name.first">

用[value]或[ngModel]绑定textarea的数据：对于输入：

<input type="text" (change)="dosomething($event.target.value)" [value]="!noHero ? (hero?.name) : ''">
<input type="text" (change)="dosomething($event.target.value)" [ngModel]="!noHero ? (hero?.name) : ''">
<input type="text" (change)="hero.name=$event.target.value" [ngModel]="hero?name">

与文本区域类似：

<textarea (change)="dosomething($event.target.value)" [value]="!noHero ? (hero?.name) : ''"></textarea>
<textarea (change)="dosomething($event.target.value)" [ngModel]="!noHero ? (hero?.name) : ''"></textarea>
<textarea (change)="hero.name=$event.target.value" [ngModel]="hero?name"></textarea>

示例： https://stackblitz.com/edit/angular-tbptuy

在 Angular2 中为 Dart 组件的视图正确使用 Elvis 运算符

Correct use of Elvis operator in Angular2 for Dart component's view

angular2-forms

angular

.html

.飞镖

错误跟踪