我有3个组成部分：
我有这个方案：
[
{
id:1,
title:"Course1",
author:"Dana",
segments:[
{
id:1,
unit_id:1,
unit_title:"Chapter 1",
name:"Lesson 1,
data:"www.video01.com/vid.avi"
},
{
id:2,
unit_id:2,
unit_title:"Chapter 2",
name:"Lesson 2,
data:"www.video02.com/vid.avi"
},
{
id:3,
unit_id:2,
unit_title:"Chapter 2",
name:"Lesson 3,
data:"www.video03.com/vid.avi"
}
]
}
]
在“课程详细信息”组件中，我想按unit_id对片段进行分组，以便获得此方案：
[
{
id:1,
title:"Course1",
author:"Dana",
segments:[
{
key: 1,
value: [{
id:1,
unit_id:1,
unit_title:"Chapter 1",
name:"Lesson 1,
data:"www.video01.com/vid.avi"
}],
key: 2,
value: [
{
id:2,
unit_id:2,
unit_title:"Chapter 2",
name:"Lesson 2,
data:"www.video02.com/vid.avi"
},
{
id:3,
unit_id:2,
unit_title:"Chapter 2",
name:"Lesson 3,
data:"www.video03.com/vid.avi"
}
]
}
]
}
]
我读到有这样做的管道，但是我遇到了很多错误，我不认为为此目的使用管道是个好主意。 如果我不使用groupBy，则我有重复的标题，例如here
我将在此处添加相关代码：
course.ts：
export interface ICourse {
course_id: number;
title: string;
autor: string;
segments: ISegment[];
}
export interface ISegment {
segment_id: number;
unit_id: number;
unit_title: string;
name: string;
type: string;
data: string;
}
course-detail.component.ts：
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { ActivatedRoute, Router, Routes } from '@angular/router';
import { ICourse } from '../course';
import { CourseService } from '../course.service';
@Component({
selector: 'lg-course-detail',
templateUrl: './course-detail.component.html',
styleUrls: ['./course-detail.component.sass']
})
export class CourseDetailComponent implements OnInit {
course: ICourse;
errorMessage: string;
constructor(private courseService: CourseService,
private route: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
const id = +this.route.snapshot.paramMap.get('id');
this.getCourse(id);
}
// Get course detail by id
getCourse(id: number) {
this.courseService.getCourse(id).subscribe(
course => this.course = course,
error => this.errorMessage = <any>error);
}
// Pass course to CoursePlayComponent
passData() {
this.courseService.send(course);
}
onBack(): void {
this.router.navigate(['/courses']);
}
}
course-detail.component.html：
<div id="main" class='course_detail' *ngIf="course">
<div class="row" id="course_detail_image">
<div class="col-lg-8">
<br>
<img src="./assets/images/lg-white.png" class="d-inline-block align-top" alt="">
</div>
</div>
<div class="row" id="course_detail_header">
<div class="container text-center">
<br>
<h1>{{course.title}}</h1>
<br>
</div>
</div>
<div class="row justify-content-lg-center" id="progress">
<div class="container text-center">
<div class="progress">
<div class="progress-bar bg-white"></div>
</div>
<td>Your Progress</td>
<br><br><br>
</div>
</div>
<div class="row" id="course_detail">
<div class="container">
<br>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#Curiculum" role="tab" data-toggle="tab">Curiculum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About" role="tab" data-toggle="tab">About this course</a>
</li>
</ul>
<br>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Curiculum">
<h4>Course Overview</h4>
<br>
<ul *ngFor="let segment of course.segments">
<li id="course_detail_title">Unit {{segment.unit_id}}: {{segment.unit_title}}</li>
<a class="course_detail_item" routerLink="/courses/{{course.id}}/segments/{{segment.id}}" (click)="passData()" ><li>{{segment.name}}</li></a>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="About">
<h4>Course Topics:</h4>
<td> text </td>
<br><br>
<h4>Course Expectations:</h4>
<td></td>
</div>
</div>
<br>
</div>
</div>
</div>
<router-outlet></router-outlet>
答案 0 :(得分：0)
我不确定您想要什么。我想你想要一些像下面这样的代码（我把注释更清楚了）
按unit_id *进行版本更正的组
this.coursesBySegmen=this.courses.map(c=>{
return {
...c, //all the properties of courses
//but segments is returned group by
//first get uniq values
segments:c.segments.filter((s,index)=>c.segments.findIndex(f=>f.unit_id==s.unit_id)==index)
//with the uniq values make a map
.map(seg=>{ //with each uniq value, return
return {
key:seg.unit_id, //the key
unit_title:seg.unit_title //<---¡¡ADD a title
value:c.segments.filter(s=>s.unit_id==seg.unit_id) //and array with all the keys
}
})
}
});
对不起，我按ID分组，而不是按unit_id分组。 （已更正）
我必须将一个unit_title属性添加到段中。当我们将一个组设为util时，请使用一个新变量（我称为“ coursesBySegmen”）
所以你可以写
<div *ngFor="let course of coursesBySegmen">
<p>{{course.id}} {{course.author}}</p>
<p>{{course.title}}</p>
<hr/>
<div *ngFor="let segmen of course.segments">
<h2>{{segmen.title}}</h2>
<p *ngFor="let item of segmen.value">
{{item.name}}
</p>
</div>
</div>
<!--only for check-->
<pre>{{coursesBySegmen |json}}</pre>