我正在嘗試按字母順序對將顯示在選擇表單欄位中的資料進行排序。資料將從 HTTP 服務中提取，包括四類：面包、蔬菜、水果和奶制品。這是我使用的管道：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderByChildPipe implements PipeTransform {
transform(array: any, field: string): any[] {
array.sort((a: any, b: any) => {
if (a[field] < b[field]) {
return -1;
} else if (a[field] > b[field]) {
return 1;
} else {
return 0;
}
});
return array;
}
}
這是 ts 組件：
import { Component, OnInit } from '@angular/core';
import { OrderByChildPipe } from 'src/app/pipes/order-by-child.pipe';
@Component({
selector: 'app-product-form-component',
templateUrl: './product-form-component.component.html',
styleUrls: ['./product-form-component.component.css']
})
export class ProductFormComponentComponent implements OnInit {
categories$:any;
constructor(private http:HttpClient) { }
ngOnInit(): void {
this.http.get('http://localhost:3000/product-categories').subscribe(res=> {
this.categories$ = res;
console.log(this.categories$)
})
}
}
這是 HTML 視圖中的相關部分：
<label for="category">Category</label>
<select id="category" *ngFor="let c of categories$ | orderBy:'name'" type="text" class="form-control">
<option value=""></option>
<option value="">{{c.bread.name}}</option>
<option value="">{{c.dairy.name}}</option>
<option value="">{{c.vegetables.name}}</option>
<option value="">{{c.fruits.name}}</option>
</select>
</div>
這是 db.json：
"product-categories": [
{
"bread": {
"name":"Bread"
},
"vegetables": {
"name":"Vegetables"
},
"dairy": {
"name":"Dairy"
},
"fruits": {
"name":"Fruits"
}
}
]
現在我知道我沒有正確執行它，因為我手動填充了所有選項，這就是管道不起作用的原因。另外，我覺得這是一個更乏味的方法。我只需要有人指出我這樣做的正確方法。一旦用戶選擇類別框，最終結果應該是按字母順序排序的所有選項（使用管道）。意義：
面包 乳制品 水果 蔬菜
謝謝！
uj5u.com熱心網友回復：
我認為您的問題不是管道本身，而是資料結構（提示：使用型別來確保您做的是正確的事情:)）。
假設來自 HTTP 請求的以下資料結構如下（從您的 db.json 復制）：
[
{
bread: {
name: 'Bread',
},
vegetables: {
name: 'Vegetables',
},
dairy: {
name: 'Dairy',
},
fruits: {
name: 'Fruits',
},
},
]
這基本上是一個陣列，只包含一個具有不同鍵的物件。為了將其轉換為有意義的排序陣列，您應該從中提取值：
this.categories$ = Object.values(res[0]);
之后，您可以使用*ngForin order 遍歷此陣列并<option>為每個條目創建一個元素（您為您的選擇執行此操作）：
<select id="category" type="text" class="form-control">
<option *ngFor="let c of categories$ | orderBy: 'name'" [value]="c.name">{{c.name}}</option>
</select>
之后，您的管道按預期作業。
提示：
- 您應該始終使用型別。即使您不知道應該排序的陣列的確切型別，您至少知道它應該是一個陣列。
- 尾隨的美元符號通常是用于定義 observables 的約定。您可以將您的可觀察物件分配給
categories$并使用async管道。這樣您就不必手動訂閱它。
uj5u.com熱心網友回復：
好的，我更改了一些東西，但仍然無法正常作業：
管道：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderByChildPipe implements PipeTransform {
transform(array: any, field: any): any[] {
array.sort((a: any, b: any) => {
if (a[field].localCompare(b[field])) {
return -1;
} else if (a[field].localCompare(b[field])) {
return 1;
} else {
return 0;
}
});
return array;
}
}
ts：
export class ProductFormComponentComponent implements OnInit {
categories$:Object[];
constructor(private http:HttpClient) { }
ngOnInit(): void {
this.http.get<Object[]>('http://localhost:3000/product-categories').pipe(map((res:Object[])=> {
this.categories$ = Object.values(res[0]);
console.log(this.categories$)
}))
}
看法：
<div class="form-group">
<label for="category">Category</label>
<select id="category" type="text" class="form-control">
<option value=""></option>
<option *ngFor="let c of categories$ | orderBy:'name'" [value]="c.name">{{c.name}}</option>
</select>
</div>
現在 VS Code 沒有錯誤，但在控制臺上顯示：
錯誤型別錯誤：無法讀取未定義的屬性（讀取“排序”）
這是什么意思？
uj5u.com熱心網友回復：
product-categories 是一個具有唯一元素的陣列，為什么不創建一個具有名稱的陣列呢？
obs$=this.http.get('http://localhost:3000/product-categories')
categories$=this.obs$.pipe(map((res:any[])=>{
const obj=res[0]; //<--get the only element
const names=Object.keys(obj).map(key=>obj[key].name).sort()
return names;
})
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/526373.html
標籤：有角度的排序
上一篇：由于方案沒有注冊的處理程式，使用擴展URL加載URL失敗
下一篇：排序新聞api端點