为什么选定的属性对每个ng-container都有效？

Question

我有两个容器。当我在一个视图中时，我希望在导航到该视图时在选项下拉列表中选择“我的约会”。在另一个视图中，我希望在options下拉列表中选择"Active“。

下面是我的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>

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

正如您在h3中看到的，我有一个ticketId。当ticketId不是0时，我希望它显示在该视图中。该html还应该与第二个容器一起显示，其中我有*ngIf="ticketId!=0“。它工作得很好。但在另一个视图中，仍然从下拉菜单中选择“活动”作为默认值，而不是“我的约会”。

​

​

如何让“我的约会”将默认设置显示为选中？

相关.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);
  }

Answer 1

我认为您的[(ngModel)]="ctx.showActive"绑定将覆盖选项上的html selected属性。另外，我不确定有两个具有相同id的控件是不是一个好主意。