Question

我使用从JSON文件接收的值创建了一个变量（finalHostname）。我记录了变量，控制台输出了正确的值。但是当我将变量绑定到HTML时，该值不会显示。

TS：

  export class TestComponent implements OnInit {

  profiles = [
    'Profile 1',
    'Profile 2'
  ];

  constructor(public _NetworkService: NetworkService) {}
  public finalHostname: '';

  networks: any; /* network data received from network.service.ts*/
  input;

  onChange(event) {
    for (let i = 0; i < this.networks.length; i++) {
        if (this.networks[i].network === event.target.value) {
          this.finalHostname = this.networks[i].hostname;
          console.log(this.finalHostname); /* loggs correctly*/
        }
    }
  }

  models = [{
  profile: this.profiles[0],
  }];

  updateRange(event) {
    if (this.input <= 0) {
      this.input = null;
    } else if (this.models.length > this.input) {
      this.models = this.models.slice(0, this.input);
    } else {
      for (let i = this.models.length; i < this.input; i++) {
        this.models.push({
          profile: this.profiles[0],
        });
      }
    }
  }
  ngOnInit() {
    this._NetworkService.getNetworks()
      .subscribe(resNetworkData => this.networks = resNetworkData);
  }
}

HTML：

        <accordion-group *ngFor="let model of models; let currentElementIndex = index"
             heading="#{{currentElementIndex + 1}}: {{model.profile}} - {{model.network}} - {{model.finalHostname}}">

     <div class="form-group">
                      <div class="col-lg-2 col-md-2 col-sm-6">
                        <label for="network">Network <span>*</span></label>
                        <select #networkinput class="form-control" #nw id="network" required [(ngModel)]="model.network"
                                name="networkinput" #network="ngModel" (change)="onChange($event)">
                          <option value="" disabled selected>Choose Network</option>
                          <option *ngFor="let network of networks" value="{{network.network}}"
                                  attr.data-hostname="{{network.network}}">{{network.network}}</option>
                        </select>
                      </div>
                    </div>
        <div class="form-group">
                          <div class="col-lg-3 col-md-3 col-sm-6">
                            <label for="finalHostname">Hostname</label>
                            <input #finalHostname="ngModel" type="text" class="form-control" id="finalHostname"
                                   [(ngModel)]="model.finalHostname"  name="finalHostname" placeholder="autogenerated hostname" disabled>
                          </div>
                        </div>
                      </div>
                  <div class="form-group">
                          <div class="col-lg-2 col-md-2 col-sm-6">
                            <label for="input">Add</label>
                            <div class="input-group">
                              <input type="number" min="1" class="form-control" id="input" [(ngModel)]="input"
                                     (ngModelChange)="updateRange($event)" name="input">
                            </div>
                          </div>
                        </div>

    <pre>
      {{ models | json }}
    </pre>

主机名取决于在网络中选择的值：

JSON：

  [
            { "network": "NW 1", "hostname": "Host 1" },
            { "network": "NW 2", "hostname": "Host 2" },
            { "network": "NW 3", "hostname": "Host 3" },

      ]

函数updateRange添加尽可能多的折叠组，用户在输入字段中输入。

Answer 1

请改用[(ngModel)]="finalHostname"。这样就可以绑定类属性＆＃34; finalhostname＆＃34;到输入栏。

无法在HTML中接收变量。在控制台中正确记录

1 个答案: