Angular 仅计算角度材质选择列表的选定值

我有一个简单的角度材质选择列表，里面有一些值

我的要求是只计算所选（选中）值的总和（然后，如果价格超过某个金额，则对价格应用折扣）

我相信这一定很容易，但我对角度和材料组件还不熟悉，不知怎么的，在谷歌或这里找不到我想要的东西。。。我的代码如下：

HTML

---

提前谢谢你

将模型和更改事件附加到mat选择列表元素 然后，您可以使用javascript方法：map、reduce

HTML:

---

希望这能有所帮助。

有多种方法可以实现。这是另一种不绑定到model属性且仅使用模板变量的方法

模板

{{option.name}-${{option.price}
您已选择了{{options.selectedOptions.selected.length}}项，总金额为${{sum}

您的折扣是10%

控制器

导出类ListSelectionExample{
@ViewChild（“选项”）选项选择列表：MatSelectionList；
选项数组：选项[]=[
{名称：'项目1'，价格：4000}，
{名称：'项目2'，价格：8000}，
{名称：'项目3'，价格：3500}，
{名称：'项目4'，价格：50}
];
总和=0；
折扣=假；
onSelectionChange（）{
这是getSum（）；
}
getSum（）{
此值为0.sum=0；
这个折扣=假；
this.options selectionlist.selectedOptions.selected
.map（s=>s.value）
.forEach（option=>this.sum+=option.price）；
如果（this.sum>12500）{//如果sum>12500美元，则应用折扣
this.sum=this.sum*0.9；
这个。折扣=真；
}
}
}

---

工作示例：

您可以选择被动方式。通过以下方式获取

MatSelectionList

实例：

。。。并执行计算/通过收听来自它的

EventEmitter

来分配观测值

---

TS：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-selector',
  styleUrls: ['./app-selector.css'],
  templateUrl: './app-selector.html'
})
export class AppSelectorComponent {
  @ViewChild(MatSelectionList, { static: true })
  readonly matSelectionOptionsComponentRef: MatSelectionList;
  readonly options: readonly Options[] = [
    { name: 'Item 1', price: 4000 },
    { name: 'Item 2', price: 8000 },
    { name: 'Item 3', price: 3500 },
    { name: 'Item 4', price: 50 }
  ];
  hasDiscount$: Observable<boolean>;
  sum$: Observable<number>;

  ngOnInit(): void {
    this.sum$ = this.matSelectionOptionsComponentRef.selectionChange.pipe(
      map(({ source }) => {
        return source.selectedOptions.selected
          .map(({ value }) => value)
          .reduce((previousValue, currentValue) => {
            return previousValue + currentValue;
          }, 0);
      }),
      startWith(0)
    );
    this.hasDiscount$ = this.sum$.pipe(
      map(value => value > 10000), // PUT THE CORRECT VALUE HERE
      startWith(false)
    );
  }
}

<mat-selection-list>
  <mat-list-option class="selected" *ngFor="let option of options" [value]="option.price">
    {{ option.name }} - ${{ option.price }}
  </mat-list-option>
</mat-selection-list>

<p>You have selected {{ matSelectionOptionsComponentRef.selectedOptions.selected.length }} 
  items with total sum of ${{ sum$ | async }}.</p>
<p *ngIf="hasDiscount$ | async">Your discount is 10%.</p>

@组件({
changeDetection:ChangeDetectionStrategy.OnPush，
选择器：“应用程序选择器”，
样式URL:['./app selector.css']，
templateUrl:“./app selector.html”
})
导出类AppSelector组件{
@ViewChild（MatSelectionList，{static:true}）
只读MatsElectionOptions组件参考：MatSelectionList；
只读选项：只读选项[]=[
{名称：'项目1'，价格：4000}，
{名称：'项目2'，价格：8000}，
{名称：'项目3'，价格：3500}，
{名称：'项目4'，价格：50}
];
hasDiscount$：可见；
金额$：可见；
ngOnInit（）：void{
this.sum$=this.matSelectionOptions ComponentRef.selectionChange.pipe(
映射（{source}）=>{
返回source.selectedOptions.selected
.map（（{value}）=>value）
.减少（（以前的值，当前值）=>{
返回上一个值+当前值；
}, 0);
}),
startWith（0）
);
this.hasDiscount$=this.sum$.pipe(
map（value=>value>10000），//在这里输入正确的值
startWith（假）
);
}
}

HTML：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-selector',
  styleUrls: ['./app-selector.css'],
  templateUrl: './app-selector.html'
})
export class AppSelectorComponent {
  @ViewChild(MatSelectionList, { static: true })
  readonly matSelectionOptionsComponentRef: MatSelectionList;
  readonly options: readonly Options[] = [
    { name: 'Item 1', price: 4000 },
    { name: 'Item 2', price: 8000 },
    { name: 'Item 3', price: 3500 },
    { name: 'Item 4', price: 50 }
  ];
  hasDiscount$: Observable<boolean>;
  sum$: Observable<number>;

  ngOnInit(): void {
    this.sum$ = this.matSelectionOptionsComponentRef.selectionChange.pipe(
      map(({ source }) => {
        return source.selectedOptions.selected
          .map(({ value }) => value)
          .reduce((previousValue, currentValue) => {
            return previousValue + currentValue;
          }, 0);
      }),
      startWith(0)
    );
    this.hasDiscount$ = this.sum$.pipe(
      map(value => value > 10000), // PUT THE CORRECT VALUE HERE
      startWith(false)
    );
  }
}

<mat-selection-list>
  <mat-list-option class="selected" *ngFor="let option of options" [value]="option.price">
    {{ option.name }} - ${{ option.price }}
  </mat-list-option>
</mat-selection-list>

<p>You have selected {{ matSelectionOptionsComponentRef.selectedOptions.selected.length }} 
  items with total sum of ${{ sum$ | async }}.</p>
<p *ngIf="hasDiscount$ | async">Your discount is 10%.</p>

{{option.name}-${{option.price}
您已选择{MatSelectionOptions ComponentRef.selectedOptions.selected.length}
总和为${sum$| async}的项

您的折扣是10%

@ViewChild(MatSelectionList, { static: true }) matSelectionOptionsComponentRef: MatSelectionList;

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-selector',
  styleUrls: ['./app-selector.css'],
  templateUrl: './app-selector.html'
})
export class AppSelectorComponent {
  @ViewChild(MatSelectionList, { static: true })
  readonly matSelectionOptionsComponentRef: MatSelectionList;
  readonly options: readonly Options[] = [
    { name: 'Item 1', price: 4000 },
    { name: 'Item 2', price: 8000 },
    { name: 'Item 3', price: 3500 },
    { name: 'Item 4', price: 50 }
  ];
  hasDiscount$: Observable<boolean>;
  sum$: Observable<number>;

  ngOnInit(): void {
    this.sum$ = this.matSelectionOptionsComponentRef.selectionChange.pipe(
      map(({ source }) => {
        return source.selectedOptions.selected
          .map(({ value }) => value)
          .reduce((previousValue, currentValue) => {
            return previousValue + currentValue;
          }, 0);
      }),
      startWith(0)
    );
    this.hasDiscount$ = this.sum$.pipe(
      map(value => value > 10000), // PUT THE CORRECT VALUE HERE
      startWith(false)
    );
  }
}

<mat-selection-list>
  <mat-list-option class="selected" *ngFor="let option of options" [value]="option.price">
    {{ option.name }} - ${{ option.price }}
  </mat-list-option>
</mat-selection-list>

<p>You have selected {{ matSelectionOptionsComponentRef.selectedOptions.selected.length }} 
  items with total sum of ${{ sum$ | async }}.</p>
<p *ngIf="hasDiscount$ | async">Your discount is 10%.</p>