Angular中基于scode匹配显示对应span标签的实现求助

Hey there! As an Angular newbie, I totally get how these data comparison tasks can feel a bit overwhelming at first. Let's break this down into simple, actionable steps to get that <span>Welcome</span> showing up exactly where it needs to.

Step 1: Set Up HttpClient to Load Your JSON Files #

First, we need to fetch the data from test.json and devices.json. Angular's HttpClient is perfect for this. Here's what you need to do:

1.1 Add HttpClientModule to Your App Module #

Open your app.module.ts and import HttpClientModule (don't forget to add it to the imports array):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import this

import { AppComponent } from './app.component';
// Import your component here if it's separate

@NgModule({
  declarations: [
    AppComponent
    // Add your component to declarations
  ],
  imports: [
    BrowserModule,
    HttpClientModule // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.2 Fetch Data and Find Common Scodes in Your Component #

In your component (let's say app.component.ts or your custom component), inject HttpClient and write code to load both JSON files, then find the overlapping scode values:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  testItems: any[] = [];
  deviceItems: any[] = [];
  commonScodeSet = new Set<string>(); // Stores scodes present in both files

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // Load test.json (make sure it's in the assets folder!)
    this.http.get<any[]>('/assets/test.json').subscribe(data => {
      this.testItems = data;
      this.checkForCommonScodes();
    });

    // Load devices.json
    this.http.get<any[]>('/assets/devices.json').subscribe(data => {
      this.deviceItems = data;
      this.checkForCommonScodes();
    });
  }

  private checkForCommonScodes(): void {
    // Wait until both datasets are loaded before comparing
    if (this.testItems.length && this.deviceItems.length) {
      // Extract all scodes from test.json into a Set for fast lookups
      const testScodes = new Set(this.testItems.map(item => item.scode));
      
      // Check each device's scode against the test set
      this.deviceItems.forEach(device => {
        if (testScodes.has(device.scode)) {
          this.commonScodeSet.add(device.scode);
        }
      });
    }
  }
}

Step 2: Update Your HTML Template to Show the Welcome Span #

Now, in your component's HTML, loop through your device items and conditionally display the <span>Welcome</span> when the device's scode is in our common set:

<!-- Assuming each imgDiv corresponds to a device item -->
<div *ngFor="let device of deviceItems" class="imgDiv">
  <!-- Your existing imgDiv content (images, device info, etc.) -->
  <img [src]="device.imagePath" alt="Device Image">
  <p>Device Name: {{device.name}}</p>
  
  <!-- Show Welcome only if scode is in commonScodeSet -->
  <span *ngIf="commonScodeSet.has(device.scode)">Welcome</span>
</div>

Quick Notes to Avoid Issues #

• Make sure your test.json and devices.json are placed in the assets folder of your Angular project—this is where HttpClient will look for them by default.
• Using a Set for commonScodeSet makes checking for existing values super fast, which is better than looping through arrays every time.
• We wait for both datasets to load before comparing (if (this.testItems.length && this.deviceItems.length)) to avoid cases where one file loads slower than the other.

内容的提问来源于stack exchange，提问作者user3774781