Блог

У меня есть 2 ng-контейнера. Когда я нахожусь в одном представлении, я хочу, чтобы при переходе к этому представлению в раскрывающемся списке параметров был выбран пункт «Мои встречи». В другом представлении я хочу, чтобы «Активный» был выбран в раскрывающемся списке параметров.

Вот мой html-код:

 <div class="wrapper wrapper-content">
    <div class="row" [@mainAnimation]>
        <div class="col-12">
            <div class="row">
                <div class="col-8">
                    <table>
                        <tr>
                            <td>
                                <h3 *ngIf="ticketId!=0" class="my-title">{{'Appointments for ticket #'  ticketId}}</h3>
                            </td>
                            <td class="pl-3">
                                <span style="font-size:115%;vertical-align:text-bottom;">
                                  <ng-container *ngIf="ticketId==0">
                                    <select class="dark-text" id="showActive" [(ngModel)]="ctx.showActive"
                                    (change)="load()">
                                        <option selected [ngValue]="2">My Appointments</option>
                                        <option [ngValue]="1">Active</option>
                                        <option [ngValue]="0">Inactive</option>
                                  </select>
                                  </ng-container>
                                  <ng-container *ngIf="ticketId!=0">
                                    <select class="dark-text" id="showActive" [(ngModel)]="ctx.showActive"
                                    (change)="load()">
                                    <option *ngIf="ticketId==0" [ngValue]="2">My Appointments</option>
                                        <option selected [ngValue]="1">Active</option>
                                        <option [ngValue]="0">Inactive</option>
                                  </select>
                                  </ng-container>

                                  amp;nbsp;amp;nbsp;{{totalCount}} matching records
                                </span>
                            </td>
 

Как вы можете видеть в h3, у меня есть TicketID. Когда идентификатор билета не равен 0, я хочу, чтобы он отображался в этом представлении. Этот HTML-код также должен отображаться со вторым контейнером, где у меня есть *ngIf=»TicketID!=0″. Это работает просто отлично. Но в другом представлении «Активный» по-прежнему выбирается по умолчанию из выпадающего списка вместо «Мои встречи».

Как мне сделать так, чтобы «Мои встречи» отображались по умолчанию как выбранные?

Код Relavent .ts

 export class AppointmentsComponent extends ComponentCanDeactivate implements OnInit,OnDestroy {
  faSort=faSort; faCaretSquareUp=faCaretSquareUp; faCaretSquareDown=faCaretSquareDown; faMinusCircle=faMinusCircle;
  ctx: MyContext; entries: IAppointmentView1[]=[]; recurranceTypes: IRecurranceType[]=[];
  wheelDbr=new MyDebouncer(100); totalCount=0; debouncer=new MyDebouncer(750); 

  @Input() ticketId = 0;
  @ViewChild('actionMenu') actionMenu: ActionMenuComponent;

  constructor(private globals: GlobalsService,private server: ServerService,private router: Router, private modalService: NgbModal, private datepipe: DatePipe) {
    super(); this.ctx=new MyContext(this.globals);
  }

  ngOnInit() {
    this.initPageSize(); this.load();
  }

  ngOnDestroy() {
    try { this.ctx.save(); } catch(err) { console.log(err); }
    try { this.modalService.dismissAll(); } catch(err) { console.log(err); }
  }

  canDeactivate(): boolean { return !this.modalService.hasOpenModals(); }

  load() {
    if(this.ticketId != 0) {
       this.server.getAppointmentsForTicket(this.ticketId, this.ctx.showActive,this.ctx.currPage,this.ctx.pageSize,this.ctx.sort_str,this.ctx.sort_dir,
        r=> { this.entries = r.AppointmentsView; this.totalCount=r.TotalMatchingCount; }); 
    } else {
      this.server.getAppointmentsView1(this.globals.currentUser.id,this.ctx.showActive,this.ctx.currPage,this.ctx.pageSize,this.ctx.sort_str,this.ctx.sort_dir,this.ctx.filter_word,
      r=> { this.entries = r.AppointmentsView; this.totalCount=r.TotalMatchingCount; });
       
    }
      this.server.getRecurranceTypes(r=>this.recurranceTypes=r);
  }
 

Я думаю [(ngModel)]="ctx.showActive" , что ваша привязка переопределит выбранный вами атрибут html в параметрах. Также я не уверен, что иметь два элемента управления с одинаковым идентификатором — хорошая идея.