Question

我有一个带有读取，编辑和插入模式的待办事项组件。模板看起来像这样：

<form *ngIf="editMode=='edit' || editMode=='insert'" class="form" (ngSubmit)="onSubmit()" [formGroup]='todoForm' novalidate>
  .... edit and insert mode contents
</form>

<span style="line-height: 33px;" *ngIf="editMode=='read'">
  .... read mode contents

</span>

todo组件包含以下两个输入变量：

  @Input() todo: Todo;
  @Input() editMode: string;

我有一个列表组件，其中包含一个todo组件列表，如下所示：

<div class="container">
  <div class='todos-container'>
    <ul class="list-group">

      <li *ngFor="let todo of todos" class="list-group-item clearfix">
        <todo-component [todo]='todo' [editMode]='read'></todo-component>
      </li>
      <li class="list-group-item clearfix">
        <todo-component [todo]='newTodo' [editMode]='insert'></todo-component>
      </li>
    </ul>
  </div>
</div>

问题是形式和跨度都不可见。当editMode是一个简单的布尔值时，它可以正常工作。 *ngIf="editMode"或*ngIf="!editMode"有效。我做错了什么？

Answer 1

尝试

[editMode]="'read'"

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions

或

editMode="read"

例如

<todo-component [todo]='todo' editMode="read"></todo-component>

然后editMode将为字符串read

另见

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a

* ng如果表达式包含字符串，则不起作用

1 个答案: