根据 <selected> 位置显示信息

Question

我正在尝试像一个简单的打印机管理器一样，所以我将能够看到我所有的打印机状态到目前为止我已经设法显示所有数据现在我想按位置和错误来组织它得到的是：无法读取未定义的属性“位置”可能是我认为[（ngModel）]它无法正常工作的原因 谢谢。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import { Values } from '../Models/Values';


@Component({
  selector: 'app-value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.css']
})


export class ValueComponent implements OnInit {
  selectedPrinter: Values;
  values: any;
  

  constructor(private http: HttpClient, public sanitizer: DomSanitizer) { }



  ngOnInit() {
    this.getValues();


  }

  getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = response;
    }, error => {
      console.log(error);
    })
  }

}

<H2>Print Manager</H2>



<div id="selectCompanyDiv">

  <div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label for="">Select location</label>
    <select class="form-control" [(ngModel)]="selectedPrinter">
      <option *ngFor="let each of values " [ngValue]="each">{{each.location}}</option>
    </select>

  </div>

  <br>
  <br>


  <div>
    <div *ngFor="let value of values" id="mainDiv">
      <!-- <p>{{value.id}},{{value.hostName}},{{value.location}},{{value.manufacturer}},{{value.ip}}</p> -->

      <span>Hostname: {{value.hostName}}</span>
      <br>
      <span>Location: {{value.location}}</span>
      <br>
      <span>Manufacturer: {{value.manufacturer}}</span>
      <br>
      <span>IP: {{value.ip}}</span>
      <br>
      <h2>{{value.location}}</h2>


      <div>

        <div *ngIf="value.hostName==='BROTHERJ480'" class="outerFrame">
          <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframej480" scrolling="no"></iframe>
        </div>

        <div *ngIf="value.hostName==='Brother6530DW'" class="outerFrame">
          <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrother6530DW" scrolling="no"></iframe>
        </div>


      </div>

    </div>

Answer 1

您需要 if 条件来显示与所选值相关的隐藏

在组件变化中

selectedPrinter: string="Bed Room";

然后在html中

<H2>Print Manager</H2>
<div id="selectCompanyDiv">
  <div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label for="">Select location</label>
    <select class="form-control" [(ngModel)]="selectedPrinter">
      <option *ngFor="let each of values " value="{{each.location}}">{{each.location}}</option>
    </select>
  </div>
  <br>
  <br>
<div>
<div *ngFor="let value of values" id="mainDiv">
    <div *ngIf="value.location===selectedPrinter">
      <span>Hostname: {{value.hostName}}</span>
      <br>
      <span>Location: {{value.location}}</span>
      <br>
      <span>Manufacturer: {{value.manufacturer}}</span>
      <br>
      <span>IP: {{value.ip}}</span>
      <br>
      <h2>{{value.location}}</h2>
      <div>
        <div *ngIf="value.hostName==='BROTHERJ480'" class="outerFrame">
          <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframej480" scrolling="no"></iframe>
        </div>
        <div *ngIf="value.hostName==='Brother6530DW'" class="outerFrame">
          <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrother6530DW" scrolling="no"></iframe>
        </div>
      </div>
    </div>
</div>