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">

.dart

...
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为空时，应将值分配到何处？如果您将短格式拆分为更明确的格式

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

然后你可以使用elvis运算符。

Answer 2

如果名称为null，您也可以执行此操作

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

Answer 3

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

一个好地方是ngOnInit()方法。

这对Angular 5有所帮助。

Answer 4

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

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

使用[value]或[ngModel]绑定文本区域的数据：输入：

<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：

<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中正确使用Elvis运算符用于Dart组件的视图

的.html

.dart

错误跟踪

4 个答案: