Отображение информации в соответствии с местоположением <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>

Answer 2

Вы можете получить выбранное значение во время выбора с помощью события ngModelChange и можете выполнять желаемые функции (на основе выбранного значения принтера). Если проблема не в этом, просьба пояснить ее.