Блог

дорогие, у меня проблема, которую я хочу добавить модально при загрузке первого посещения, мне пришлось написать приведенный ниже код в HTML

             <button type="button" id="openModal" (click)="getstores()" #openModal
                class="btn btn-outline-dark btn-sm ml-2" data-toggle="modal" data-target="#staticBackdrop">
                Choose Branch
            </button>

            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Choose your nearset branch 
                                <i class="fa fa-smile-wink"></i>
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">amp;times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-check form-check-inline" *ngFor="let d of data">
                                <input class="form-check-input" type="radio" name="store" id="inlineRadio1" (change)="radioChangeHandler($event)" value="{{d.name}}" >
                                <label class="form-check-label" for="inlineRadio1">{{d.name}}</label>
                              </div>
                              
                        </div>
                        <!-- <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Understood</button>
                        </div> -->
                    </div>
                </div>
            </div> 
  

и в TS:-

»’

 import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { StoresService } from '../shared/stores.service';

@Component({
  selector: 'app-header-bar',
  templateUrl: './header-bar.component.html',
  styleUrls: ['./header-bar.component.css']
})
export class HeaderBarComponent implements OnInit {
  @ViewChild('openModal') openModal:ElementRef;
  data : Array<any>;

  constructor(private service : StoresService) {
    this.data = new Array<any>();
   }

  ngOnInit() {
    this.openModal.nativeElement.click();
    alert("Hi");
  }

  getstores(){
    this.service.getStores().subscribe(data=>{
      this.data = data;
    });
  }
  
  radioChangeHandler(event : any){
    this.data = event.target.value;
    localStorage.setItem("store",JSON.stringify(this.data));
  }
}
  

и все еще не работает, может ли кто-нибудь мне помочь, пожалуйста, потому что я хочу заставить пользователя выбирать выбор перед просмотром на моем сайте,
я пробовал какой-то способ в другом сообщении из stack overflow, но не сработал.

ngOnUnit не видит ViewChild элемент, в котором вам нужно это сделать AfterViewInit

 export class HeaderBarComponent implements OnInit,AfterViewInit {

ngAfterViewInit() {
    this.openModal.nativeElement.click();
    alert("Hi");
  }