選択したプルダウンを選んだ時に、対象の情報を取ってくる処理
Q&A
プルダウンで500000万円以下、1000000万円以下、2000000円以下のプルダウンがある。
選択したプルダウンの金額に応じて対象の商品を取ってくる処理を教えていただきたい。
angular➕Node.js、postgresを使用しています。
情報不足だと思うのでわからないことあれば質問いただけると幸いです。
0 likes
2Answer
自分ではどこまで実装できていて、どこで躓いていて、何が分かれば解決できるかを、自分が書いたコードをアップするなどして質問欄に追加情報として書いてください。
1Like
こんな感じですかね？
商品一覧は適当に作っているので、この部分を本物に差し替えたらいいと思いますよ。
src/app/merchandise/merchandise.component.ts
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgForOf, NgIf } from '@angular/common';
@Component({
selector: 'app-merchandise',
imports: [ReactiveFormsModule, NgForOf, NgIf],
templateUrl: './merchandise.component.html',
styleUrl: './merchandise.component.css',
})
export class MerchandiseComponent {
readonly budgets: Budget[] = [
{ value: 0, name: '' },
{ value: 5000000000, name: '500000万円以下' },
{ value: 10000000000, name: '1000000万円以下' },
{ value: 2000000, name: '2000000円以下' },
];
readonly allMerchandises: Merchandise[] = [
{ id: 1, name: '商品1', price: 10000 },
{ id: 2, name: '商品2', price: 100000 },
{ id: 3, name: '商品3', price: 1000000 },
{ id: 4, name: '商品4', price: 10000000 },
{ id: 5, name: '商品5', price: 100000000 },
{ id: 6, name: '商品6', price: 1000000000 },
{ id: 7, name: '商品7', price: 10000000000 },
{ id: 8, name: '商品8', price: 100000000000 },
{ id: 9, name: '商品9', price: 1000000000000 },
];
readonly selectedBudgetControl = new FormControl(this.budgets[0]);
readonly selectedMerchandiseControl = new FormControl();
merchandises: Merchandise[] = [];
selectedIndex: number = -1;
onBudgetSelect(): void {
const budget: Budget = this.selectedBudgetControl.value ?? this.budgets[0];
this.merchandises = this.allMerchandises.filter(
(item) => item.price <= budget.value
);
this.selectedMerchandiseControl.setValue(null);
this.selectedIndex = -1;
}
onMerchandiseSelect(): void {
const id: number | undefined = this.selectedMerchandiseControl.value?.id;
this.selectedIndex =
id === undefined
? -1
: this.merchandises.findIndex((item) => item.id === id);
}
}
type Budget = {
value: number;
name: string;
};
type Merchandise = {
id: number;
name: string;
price: number;
};
src/app/merchandise/merchandise.component.html
<h2>商品</h2>
<form id="merchandise">
<select id="budgets" [formControl]="selectedBudgetControl" (change)="onBudgetSelect()">
<option *ngFor="let budget of budgets" [ngValue]="budget">{{ budget.name }}</option>
</select><br>
<select id="merchandises" [formControl]="selectedMerchandiseControl" (change)="onMerchandiseSelect()" size="10">
<option *ngFor="let merchandise of merchandises" [ngValue]="merchandise">{{merchandise.name}}</option>
</select>
<div id="showitem" *ngIf="selectedIndex >= 0 && selectedIndex < merchandises.length">
<dl>
<dt>ID</dt><dd>{{merchandises[selectedIndex].id}}</dd>
<dt>name</dt><dd>{{merchandises[selectedIndex].name}}</dd>
<dt>price</dt><dd>{{merchandises[selectedIndex].price}}</dd>
</dl>
</div>
</form>
0Like