Question

我正在关注有关角度（https://angular.io/tutorial/toh-pt2）的教程，因此决定做一些不同的事情。在相同类型的两个不同类对象上使用插值指令，就像它们是同一对象一样！

教程中的

重复指令* ngFor中的所有内容都不会显示，因为当应用启动时，因为selectedCorper在设计上未定义。

模板中引用selectedCorper属性的表达式（如{{selectedCorper.name}}之类的绑定表达式必须失败，因为没有选定的corper。

但对象'corper'{{corper.firstname |大写}}仍应显示，因为它不是被选择的对象正确

我尝试更改变量名称甚至对象类型

// corper.component.html
<p>
  It works! This is {{ corper.firstname | uppercase }}
</p>

<h2>Some corpers</h2>
<ul class="corpers">
  <li *ngFor="let corper of corpers" (click)="onSelect(corper)" 
[class.selected]="corper === selectedCorper">
    <span class="badge">{{corper.spa}}</span> {{corper.firstname}}
  </li>
</ul>

<div > // removed the *ngIf="selectedCorper" directive
  <h4>
    the selected corper id is {{ selectedCorper.id }}, firstname {{ 
selectedCorper.firstname }}
  </h4>

  <div>
    <label for="firstname">
      name:
    </label>
    <input [(ngModel)]="selectedCorper.firstname" name="firstname" 
placeholder="selected corper's firstname">
  </div>
</div>
//-- end of corper.component.html

   // corper.component.ts
export class CorperComponent implements OnInit {

  mysql: mysql;

  corper: Corper = {
    ...
  };

  corpers = CORPERS;

  selectedCorper: Corper;

  onSelect(corper: Corper): void {
    this.selectedCorper = corper;
    console.log('WE PRESENT: the clicked/selected corper', corper);
  }

  constructor() { }

  ngOnInit() {
  }

}

我期望 {{corper.firstname |大写}} 在应用启动时显示结果而不是未定义

在相同类型的两个不同类对象上使用角度插值时，其行为就像它们是同一对象

0 个答案: