在将值设置为null后，HTML下拉列表将消失

我有两个值

power

和

mainPower

，它们描述了相同的东西，但是

mainPower

在后端保存了

Long

类型的id，并且

power

保存了此dto的所有属性。使用下面的代码，我可以更新英雄的力量，这意味着我可以将它从某个东西更改为另一个，也可以使其

null

（意味着没有力量）

问题在于，当电源设置为

null

或之前为

null

时，下拉菜单将消失。我不希望下拉列表消失，我只希望它在为空时说“无电源”，我应该能够将它从

null

更改为其他内容

hero-detail.component.html

<form #heroUpdateForm = "ngForm">
      {{diagnostic}}
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
               required
               *ngIf="hero" [(ngModel)]="hero.name" name="name">
      </div>

      <div class="form-group">
        <label for="desc">Description</label>
        <input type="text"  class="form-control" id="desc"
              *ngIf="hero" [(ngModel)]="hero.desc" name="desc">
      </div>

      <div class="form-group" *ngIf="hero?.power">
        <label for="power">Main Power</label>
        <select class="form-control"  id="power"
                required
                [(ngModel)]="hero.mainPower" name="power">
          <option [ngValue]="null">no power</option>
          <ng-container *ngFor="let power of powers">
            <option [value]="power.id">{{power.name}}</option>
          </ng-container>
        </select>
      </div>
    </form>

---

很明显，它将消失，请再次查看您的模板：

       <div class="form-group" *ngIf="hero?.power"> <!-- lookie here, if either hero or power is null this element along with everything in it will be gone!! -->
         <label for="power">Main Power</label>
         <select class="form-control"  id="power"    <!-- your select is inside the div above with the ng if -->
                required
                [(ngModel)]="hero.mainPower" name="power">
         <option [ngValue]="null">no power</option>
         <ng-container *ngFor="let power of powers">
           <option [value]="power.id">{{power.name}}</option>
         </ng-container>
       </select>

主电源
必修的
[（ngModel）]=“hero.mainPower”name=“power”
没电
{{power.name}

基本上，围绕select元素的div中的ngIf表示以下内容：

• 如果（

  ngIf

  ）英雄和力量->显示元素
• 如果（

  ngIf

  ）没有英雄和力量->移除元素

---

您可能不想拥有英雄。也许您应该检查一下是否有英雄，而不是英雄。很明显，为什么它会消失，请再次查看您的模板：

       <div class="form-group" *ngIf="hero?.power"> <!-- lookie here, if either hero or power is null this element along with everything in it will be gone!! -->
         <label for="power">Main Power</label>
         <select class="form-control"  id="power"    <!-- your select is inside the div above with the ng if -->
                required
                [(ngModel)]="hero.mainPower" name="power">
         <option [ngValue]="null">no power</option>
         <ng-container *ngFor="let power of powers">
           <option [value]="power.id">{{power.name}}</option>
         </ng-container>
       </select>

主电源
必修的
[（ngModel）]=“hero.mainPower”name=“power”
没电
{{power.name}

基本上，围绕select元素的div中的ngIf表示以下内容：

• 如果（

  ngIf

  ）英雄和力量->显示元素
• 如果（

  ngIf

  ）没有英雄和力量->移除元素

---

您可能不想拥有英雄。也许您应该检查一下是否有英雄，而不是我最终理解了，但不知道该检查什么。如果我没有检查，我得到一个TypeError不能读取undefined，但现在它工作了。非常感谢。没问题，很高兴我能帮上忙，也许更好的解决办法是使用

ngIf=“hero”

并将您的ngFor更改为

，并返回一个空选项数组。如果hero没有权限，那么权限检查将在

getPowers

中。我最终理解了，但不知道检查什么。如果我没有检查，我得到一个TypeError不能读取undefined，但现在它工作了。非常感谢。没问题，很高兴我能帮上忙，也许更好的解决办法是使用

ngIf=“hero”

并将您的ngFor更改为

，并返回一个空选项数组。如果hero没有权限，那么权限检查将在

getPowers

中。