Question

这是我在角度方面的第一个组成部分。这是：

import { Component } from '@angular/core';

export class Hero{
    id:number;
    name:string;
}

const HEROES: Hero[]=[
  {id:11,name:'Mr. Nice'},
  {id:12,name:'Arco'},
  {id:13,name:'Gillette'},
  {id:14,name:'Celeritas'},
  {id:15,name:'Magneta'},
  {id:16,name:'RubberMan'},
  {id:17,name:'Dynama'},
  {id:18,name:'Dr. Iq'},
  {id:19,name:'Magma'},
  {id:20,name:'TOrnado'}
];


@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
            <h2>My heroes</h2>
            <ul class="heroes">
                <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
                    <span class="badge">{{hero.id}}</span> {{hero.name}}
                </li>
            </ul>
            <h2>Details of {{selectedHero.name}}</h2>
            <div><label>Id: </label>{{selectedHero.id}}</div>
            <div>
                <label>Name: </label>
                <input [(ngModel)]="selectedHero.name"/>
            </div>

  `,
  styles: [`

`]
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

我删除了styles元素，因为它很大。我的模板没有绑定heroes数组，当我在template元素中使用它时：

<input [(ngModel)]="selectedHero.name"/>

但是当我删除上面的输入时，数组中的所有heroes都会正确显示在<ul>列表中。

为什么？

Answer 1

您没有设置$customConfig = @{ "fileUris" = @("https://$storageAccountName.blob.core.windows.net/scripts/script.ps1"); "commandToExecute" = "PowerShell -ExecutionPolicy Unrestricted .\script.ps1"; }; $vmss = Get-AzureRmVmss -ResourceGroupName $resourceGroup -VMScaleSetName $vmssname Add-AzureRmVmssExtension -VirtualMachineScaleSet $vmss -Publisher Microsoft.Compute -Type CustomScriptExtension -TypeHandlerVersion 2.0 -Name "runscript" -Setting $customConfig # Send the new config to Azure Update-AzureRmVmss -ResourceGroupName $resourceGroup -Name "$vmssname" -VirtualMachineScaleSet $vmss属性，但仍尝试显示和修改它。将英雄详细信息移至部分并向其添加selectedHero，以便仅在设置时显示：

ngIf

Answer 2

这是因为当没有选定的英雄时，Angular无法读取selectedHero.name。只有当selectedHero使用*ngIf指令时，您才能（并且需要）显示此输入，如下所示：

<input *ngIf="selectedHero" [(ngModel)]="selectedHero.name"/>

不仅仅是input - 对于您使用selectedHero的每个元素：

<h2 *ngIf="selectedHero">Details of {{selectedHero.name}}</h2>
<div *ngIf="selectedHero"><label>Id: </label>{{selectedHero.id}}</div>
<div *ngIf="selectedHero">
  <label>Name: </label>
  <input [(ngModel)]="selectedHero.name"/>
</div>

或者更好地添加一个包含*ngIf指令的包装器：

<div *ngIf="selectedHero">
  <h2>Details of {{selectedHero.name}}</h2>
  <div><label>Id: </label>{{selectedHero.id}}</div>
  <div>
    <label>Name: </label>
    <input [(ngModel)]="selectedHero.name"/>
  </div>
</div>

我记得，这是写在＆＃34;英雄之旅＆＃34;对于Angular，它不仅仅是我的想法;）

为什么[（ngModel）]会破坏角度4中的所有模板？

2 个答案: