我正在使用一个处理音乐曲目的库,并且曲目数组具有一个名为“ track”的类型,该类型具有标题和指向相关曲目的链接。像这样:
Playlist: Track[] = [
{
title: 'Audio One Title',
link: 'Link to Audio One URL'
},
{
title: 'Audio Two Title',
link: 'Link to Audio Two URL'
},
{
title: 'Audio Three Title',
link: 'Link to Audio Three URL'
},
];
我试图递归地加载它,所以我已经对其进行了初始化:
msaapPlaylist: Track[] = [];
并且我正在尝试从另一个数组中将其推入:
this.msaapPlaylist.push([song.title, song.link]);
它说我不能将type:any推入Track,因为它缺少Track类型的属性:“ title”和“ link” 有道理!但我不知道该怎么做。任何指示都是合理的。
修改 为了回应评论,这是我在做什么。有一个mapquest api函数,可根据行程长度构建播放列表。
import { Component, OnInit } from '@angular/core';
import { Observable, Subject, combineLatest} from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {MapQuestService} from '../services/mapQuest.service';
import { HttpClient} from '@angular/common/http';
import * as _ from 'lodash';
import { Track } from 'ngx-audio-player';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
class ToAndFromVals {
constructor(public readonly from: string, public readonly to: string) {}
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
faCoffee = faCoffee;
title = 'hw5-part1';
distResult: any;
timeResult: any;
maneuvs: any;
to: any;
from: any;
musicData: any[];
travelTime: any;
playList: any[] = [];
playListLength: number;
msaapDisplayTitle = true;
msaapDisplayPlayList = true;
msaapPageSizeOptions = [2, 4, 6];
msaapDisplayVolumeControls = true;
// Material Style Advance Audio Player Playlist
msaapPlaylist: Track[] = [ ];
private searchTerms: Subject<ToAndFromVals>;
constructor(private mapQuestService: MapQuestService, private http: HttpClient) { }
parseMusic(data: any) {
const timeRegex = /^(\d+):(\d+)$/;
for (let song of data) {
let matchsong = song.length.match(timeRegex);
let secondsTotal = (parseInt(matchsong[1], 10) * 60) + parseInt(matchsong[2], 10);
song.totalSeconds = secondsTotal;
}
this.musicData = data;
}
search(from: string, to: string): void {
if ( from && to ) {
let searchy = new ToAndFromVals(from, to);
this.searchTerms.next(searchy); }}
ngOnInit() {
this.searchTerms = new Subject<ToAndFromVals>();
this.searchTerms.pipe(
debounceTime(1000),
distinctUntilChanged(),
switchMap((x) => {
return this.mapQuestService.getMap(x.from, x.to);
}))
.subscribe((result: any) => {
console.log(result);
this.distResult = result.route.distance;
this.timeResult = result.route.formattedTime;
this.maneuvs = result.route.legs[0].maneuvers;
this.travelTime = result.route.time;
this.createPlaylist();
});
// http request to fetch song data and store it
let url: string = "assets/musicData.json";
this.http.get(url).subscribe(
(data: any) => {
this.parseMusic(data);
});
}
// shuffles list so user doesnt hear same songs over and over
createPlaylist() {
this.playList.length = 0;
this.playListLength = 0;
let shuffledlist = _.shuffle(this.musicData);
for (let song of shuffledlist) {
let left = this.travelTime - this.playListLength;
if (song.totalSeconds <= left) {
this.playList.push(song);
// this.msaapPlaylist.push({title: 'stoofleberg', link: 'assets/music/Ghost Story.mp3', index: 1});
this.msaapPlaylist.push({title: song.title, link: song.link});
this.playListLength += song.totalSeconds;
}
}
console.log(this.playList, 'and', this.travelTime, 'and', this.playListLength);
console.log(this.msaapPlaylist);
}
formatTime(seconds){
if (seconds ===undefined || seconds === null){
return '';
}
let minute = Math.floor(seconds / 60);
let secondsThing = seconds % 60;
let hour = Math.floor(minute / 60);
minute = minute % 60;
// tslint:disable-next-line: max-line-length
let wholeThing = hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0') + ':' + secondsThing.toString().padStart(2, '0');
return wholeThing;
}
ngAfterViewInit() {
this.search('boston', 'poughkeepsie');
}
}
HTML
<div class="container">
<h3>HW5-p1</h3>
<form >
<input
#from
id="from"
(keyup)="search(from.value, to.value)" placeholder="From" value="boston"/>
<input
#to
id="to"
(keyup)="search(from.value, to.value)" placeholder="To" value="poughkeepsie"/>
</form>
<hr/>
<h2>Songs and Lengths</h2>
<h3>Travel Length {{formatTime(travelTime)}}</h3>
<h3>Playlist Length {{formatTime(playListLength)}}</h3>
<ul id="playMusic" *ngFor='let song of playList'>
<li><a href='assets/music/{{song.title}}.mp3' target='_blank'>{{song.title}}</a> {{song.length}}</li>
</ul>
</div>
<hr/>
<table class="table table-striped" id='maps'>
<tr><th colspan="4"> Distance: {{distResult}} miles - Time: {{timeResult}} </th></tr>
<tbody *ngFor="let m of maneuvs">
<tr>
<td><a href='{{m.iconUrl}}' target=_x>
<img src="{{m.iconUrl}}"/>
</a></td>
<td>{{m.index + 1}}. </td>
<td>
<a href='{{m.mapUrl}}' target=_x>
{{m.narrative}} </a>
</td>
<td>{{m.distance}}</td>
</tr>
</tbody>
</table>
<div class="container" id="BobDiv">
<mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle"
[displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="msaapPageSizeOptions"
[displayVolumeControls]="msaapDisplayVolumeControls" [expanded]="true"></mat-advanced-audio-player>
</div>
<router-outlet></router-outlet>
答案 0 :(得分:1)
假设Track
的类型是
interface Track {
title: string;
link: string
}
尝试:
this.msaapPlaylist.push(
{ title: song.title, link: song.link }
);