在 Angular2 中正确使用 Elvis 运算符来查看 Dart 组件的视图答案

【问题标题】：Correct use of Elvis operator in Angular2 for Dart component's view在 Angular2 中正确使用 Elvis 运算符来查看 Dart 组件的视图
【发布时间】：2016-05-11 17:58:52
【问题描述】：

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

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

干杯

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

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

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

那么你就可以使用elvis操作符了。

【讨论】：

如何清除我输入的文本中的值。我也有同样的想法，但是当我调用一个只包含文本框的 clear 函数时，它并没有清除我使用此运算符的文本框。
机器人确定你的意思。怎么样this.name = '';
[(ngModel)]=x?.y?.z?.k 的拆分应该是什么？考虑x===null
[ngModel]="x?.y?.z?.k" (ngModelChange)="x?.y?.z && x.y.z.k = $event"
因为在相同的形式中，有时如果 elvil 操作符有效，有时无效？

【解决方案2】：

如果 name 为 null 你也可以这样做

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

【讨论】：

【解决方案3】：

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

ngOnInit() 方法是个好地方。

这在 Angular 5 上帮助了我。

【讨论】：

【解决方案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 类似：

<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

【讨论】：