Angular页面加载时如何隐藏已有用户的无数据源提示？

Hey there! The issue you're hitting is that when users with existing data sources load the page, the empty state message flashes briefly—this happens because sources starts as an empty array while your app fetches the actual data. Here's how to fix it cleanly:

Step 1: Add a Loading State in Your Component #

First, add a boolean variable to track if data is still being loaded in your component class:

isLoading = true;

Then, update your data-fetching logic to set this variable to false once the data is ready (or if an error occurs):

// Example API call (adjust to match your actual data service)
this.dataSourceService.getSources().subscribe(
  (fetchedSources) => {
    this.sources = fetchedSources;
    this.isLoading = false;
  },
  (error) => {
    // Handle error if needed, but still mark loading as complete
    console.error('Failed to load sources:', error);
    this.isLoading = false;
  }
);

Step 2: Update the Template to Respect Loading State #

Modify your template to only show the no-data message when both loading is complete and there are no sources. You can also add a loading indicator for better UX:

<div class="row" [hidden]="listView">
  <!--DATE:May-14-2018 -->
  <!-- start -->
  
  <!-- Optional: Loading state indicator -->
  <div *ngIf="isLoading" class="col-lg-12 text-center">
    <p>Loading your data sources...</p>
    <!-- You can replace this with a spinner component if you have one -->
  </div>

  <!-- No-data state: Only show when loading is done AND no sources exist -->
  <div *ngIf="!isLoading && sources.length === 0">
    <p class="no-data">No Datasources to show. Please Create a new DataSource</p>
  </div>

  <!-- Data list: Only show when loading is done AND sources exist -->
  <div *ngIf="!isLoading && sources.length !== 0" class="col-lg-12">
    <!--DATE:May-14-2018 -->
    <!-- end -->
    <div class="row">
      <div *ngFor="let source_info of sources;let i=index " class="col-xl-3 col-lg-6 col-sm-6 col-xs-12">
        <div class="cat__core__step cat__core__step-- mb-4">
          <div class="row">
            <div class="col-md-3 col-xl-3 col-lg-3">
              <span class="cat__core__step__digit">
                <img class="widget-logo" src="assets/images/data_source_widget_icons/{{source_info.source.vendor}}.png">
              </span><!-- cat__core__step__digit -->
            </div>
            <div class="col-md-9 col-xl-9 col-lg-9">
              <div class="cat__core__step__desc">
                <span class="cat__core__step__title widget_name">{{source_info.source.name}}</span>
                <div class="source-category">Category : {{source_info.source.category}}</div>
                <div class="records">Version : {{source_info.source.version}} </div>
                <button type="button" class="btn btn-outline-danger btn-sm icmn-bin" data-toggle="modal" [attr.data-target]="'#delete_modal_widget_' + source_info.source.name" (click)="password=''" *ngIf="source_info.source.assigned === false" ></button>
                <a [routerLink]="['../edit/'+source_info.source.name]" [queryParams]="{'display':source_info.source.category,'category':source_info.source.category,'vendor_name':source_info.source.vendor,'vendor_title':source_info.source.name}">
                  <button type="button" class="btn btn-outline-warning btn-sm icmn-pencil"></button>
                </a>
                <a [routerLink]="['../view/'+source_info.source.name]" [queryParams]="{'display':source_info.source.category,'category':source_info.source.category,'vendor_name':source_info.source.vendor,'vendor_title':source_info.source.name}">
                  <button type="button" class="btn btn-outline-success btn-sm icmn-eye"></button>
                </a>
              </div>
              <!-- cat__core__step__desc -->
            </div>
            <!-- col-md-9 col-xl-9 col-lg-9 -->
          </div><!-- row -->
        </div><!-- cat__core__step-- mb-4 -->
      </div><!-- ngFor -->
    </div>
  </div>
</div>

Why This Fix Works #

• The isLoading variable acts as a gate: while data is being fetched, we don't show either the empty state or the data list (you can use a spinner here to keep users informed).
• Once loading finishes (!isLoading), we only show the no-data message if sources is actually empty—this means users with existing data will never see the empty state flash.
• It maintains the original functionality for new users who truly have no data sources.

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