Question

我有两个用户报告，即报告abc和报告xyz，并且两者都使用单个html页面，例如，如果我需要abc用户报告，则它会显示abc的标签和下拉列表，而xyz则相同，但取决于时间根据报告类型，这是我为abc做的事情：-

<div class="row">
    <div class="col-sm-6">
      <span>{{reportType}}</span>
      <select [(ngModel)]="selectedabcuser">
        <option *ngFor="let user of abcUsers" [value]="user.id">
          {{user.name}} ({{user.id}})
        </option>
      </select>
</div>

，但该问题无法为xyz用户处理。请任何线索。

Answer 1

无论如何，您都需要在报告上选择两个下拉菜单，

<div class="row">
    <div class="col-sm-6">
      <span>{{reportType}}</span>
      <ng-container *ngIf="reportType ==='abc'">
      <select [(ngModel)]="selectedabcuser">
        <option *ngFor="let user of abcUsers" [value]="user.id">
          {{user.name}} ({{user.id}})
        </option>
      </select>
      </ng-container>
     <ng-container *ngIf="reportType ==='xyz'">
      <select [(ngModel)]="selectedxyzuser">
        <option *ngFor="let user of xyzusers" [value]="user.id">
          {{user.name}} ({{user.id}})
        </option>
      </select>
     </ng-container>
</div>

Answer 2

您必须动态获取变量，例如通过调用一个函数：

<div class="row">
    <div class="col-sm-6">
      <select [(ngModel)]="selectedUser">
        <option *ngFor="let user of getUserMap('abc').data" [value]="user.id">
          {{user.name}} ({{user.id}})
        </option>
      </select>
</div>

打字稿：

type UserType = 'abc' | 'xyz';

interface User {
    name: string;
    id: string;
}

interface UserMap {
     type: UserType;
     data: User[];
}

export class YourComponent {

    public selectedUser: User;

    public users: UserMap[] = [ 
        { type: 'abc', data: [{ name: 'foo', id: '1' }] }, 
        { type: 'xzy', data : [{ name: 'bar', id: '2' }] }, 

    ];

    public getUserMap(type: UserType): UserMap {
        // returns this.users[0] if called with getUsers('abc')
        this.users.find(userMap => userMap.type === type)
    }

 }

Angular nf，如果不处理

2 个答案: