Question

我是棱角分明的新人（不是angularJs），还有一些我不知道如何处理打字稿的东西。

我有一个下拉列表（primeng），我用来搜索用户并在表格中显示结果（primeT的dataTable），我想要做的是当我选择exp的用户名时，我只能在下一个下拉列表中找到他的相关数据。我怎样才能做到这一点？ html模板：

＆＃13;

<p-dataTable #dataTable [value]="tableUserList"  [(selection)]="selectedUsers" selectionMode="multiple">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" >
    </p-column>
</p-dataTable>

＆＃13;

表ts：

＆＃13;

export class UserTableComponent implements OnChanges {

  @Input('tableUserList') TableUserList: User[];
  @ViewChild('dataTable') dataTable: DataTable;
  @ViewChild('multiselect') multi: MultiSelectComponent;

  UserDatas: Response;
  selectedTableUserList: any[];
  selectedUsers : User[];
  columns: any[];
  rowsPerPage: number;
  firstRowIndex = 1;
  totalRecords = 0;
  cols: any[];

  constructor(private UserTable: AdminService) {
    this.selectedTableUserList = [];
    this.rowsPerPage = 10;
    this.firstRowIndex = 1;
    this.tableUserList = [];

    this.cols = [
      { field: 'givenName', header: 'Nom' },
      { field: 'familyName', header: 'Prenom' },
      { field: 'mail', header: 'email' },
      { field: 'cuid', header: 'Cuid' }
    ];
  }

  ngOnChanges() {
    if (this.tableUserList && this.tableUserList.length) {
      this.totalRecords = this.tableUserList[0].userCount;
      this.firstRowIndex = 0;
    }
    this.selectedTableUserList = [];
  }


}

＆＃13;

＆＃13; 用户搜索ts：

＆＃13;

export class UserSearchComponent {
  @Output() onSearch = new EventEmitter<any>();
  UserDatas: Response;
  user: User;

  searchForm: FormGroup;
  errormessages: string;
 collapsed = true;

  SelectedUser: User;
  givenNames: SelectItem[];
  familyNames: SelectItem[];
  mails: SelectItem[];
  cuids: SelectItem[];

  selectedFamilyNamee:string;


  constructor(fb: FormBuilder,
    private http: Http,
    private _userSearchService: AdminService
  ) {
    this.searchForm = fb.group({
      'selectedGivenName': null,
      'selectedFamilyName': null,
      'selectedCuid': null,
      'selectedMail': null
    });

    this.givenNames = [];
    this.familyNames = [];
    this.cuids = [];
    this.mails = [];

  }

  ngOnInit(): void {
    this._userSearchService.findAll()
      .subscribe(data => {
        this.UserDatas = data;
        console.log(this.UserDatas);
      });
  }

  onSubmit(searchFormValue): void {
    if (this.isValid(searchFormValue)) {
      if (searchFormValue === searchFormValue.SelectedUser) {

      }
      let user = {
        givenName: searchFormValue.selectedGivenName,
        familyName: searchFormValue.selectedFamilyName,
        cuid: searchFormValue.selectedCuid,
        mail: searchFormValue.selectedMail
      }
      this.onSearch.emit(user);
      this.errormessages = '';
    }
  }

  onSelected(formModel) {
    this.searchForm.patchValue({
      'selectedGivenName': formModel.givenName,
       'selectedFamilyName': formModel.familyName,
         'selectedCuid': formModel.cuid,
         'selectedMail': formModel.mail
    });
  }


  
}

＆＃13;

＆＃13; 表单模板：

＆＃13;

 <div class="nd_panel form_filter_home fixed" id="panel-filter-search-container">
  <h6>
    <span class="glyphicon glyphicon-filter text-primary"></span>
    <label>{{ 'search-filtre' | translate }}</label>
  </h6>
   <div class="nd_panel_content collapse" [ngClass]="{'in': !collapsed}" id="filters">
    <div class="container-fluid" id="panel-filter-search">
      <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)">
        <span class="text-danger" id="message-valid-filter-search">{{errormessages}}</span>
        <div class="row">
          <div class="col-xs-2" id="givenName-filter-search">
            <p-dropdown [options]="UserDatas" (onChange)="onSelected($event.value)" filter="filter" placeholder="Nom" optionLabel="givenName"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedGivenName']">
            </p-dropdown>
          </div>
          <div class="col-xs-1 help-container">
            <span class="glyphicon glyphicon-question-sign text-primary" pTooltip="Choisissez un nom" tooltipPosition="top"></span>
          </div>
          <div class="col-xs-2" id="familyName-filter-search">
            <p-dropdown [options]="UserDatas"  filter="filter" (onChange)="onSelected($event.value)" placeholder="Prenom" optionLabel="familyName"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedFamilyName']">
            </p-dropdown>
          </div>
          <div class="col-xs-1 help-container">
            <span class="glyphicon glyphicon-question-sign text-primary" pTooltip="Choisissez un prenom" tooltipPosition="top"></span>
          </div>
           <div class="col-xs-2" id="cuid-filter-search">
            <p-dropdown [options]="UserDatas" filter="filter" (onChange)="onSelected($event.value)" placeholder="CUID" optionLabel="cuid"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedCuid']">
            </p-dropdown>
          </div>
          <div class="col-xs-1 help-container">
            <span class="glyphicon glyphicon-question-sign text-primary" pTooltip="Choisissez un CUID" tooltipPosition="top"></span>
          </div>
          <div class="col-xs-2" id="mail-filter-search">
            <p-dropdown [options]="UserDatas" filter="filter" (onChange)="onSelected($event.value)" placeholder="e-mail" optionLabel="mail"
              [style]="{'width':'100%'}" [formControl]="searchForm.controls['selectedMail']">
            </p-dropdown>
          </div>
          <div class="col-xs-1 help-container">
            <span class="glyphicon glyphicon-question-sign text-primary" pTooltip="Choisissez un e-mail" tooltipPosition="top"></span>
          </div>
        </div> <br>
        <div class="row">
          <div class="col-xs-12">
            <button type="submit" class="btn btn-primary pull-right" id="submit-button-filter-search"><span class="glyphicon glyphicon-search"></span>Search</button>
          </div>
        </div>
      </form> 
        </div>
   </div>
   <br>
 </div>

＆＃13;

＆＃13; PS：我的用户数据在json文件

中被模拟

＆＃13;

@Injectable()

export class UserService {

selectedData: any;
constructor(private http: Http) {}

  findAll(): Observable<Response> {
   return this.http.get('../../assets/mock-data/data.json').map(res => res.json().UserDatas) 
}
}

＆＃13;

提前谢谢

下拉列表数据绑定

0 个答案: