18

我在 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

什么情况下可以在组件视图中使用操作符？

干杯

4

4 回答 4

53

正如错误消息所说，它不能用于分配。name当为空时，值应该分配到哪里？如果您将简短形式拆分为更明确的形式

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

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

于 2016-02-02T19:30:17.383 回答
7

如果名称为空，您也可以这样做

<input type="text" *ngIf="name" [(ngModel)]="name.first">
于 2017-04-20T02:33:02.480 回答
1

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

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

这在 Angular 5 上帮助了我。

于 2019-07-25T12:24:00.917 回答
0

您可以使用 *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 类似：

<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

于 2020-02-11T10:49:42.620 回答