javascript - 在组件之间传递数据不起作用 Angular
问题描述
我有一个问题,我正在尝试将playlist[]
数组从 component.ts 传递给 header.ts。
ERROR TypeError: Cannot read property 'length' of undefined
下面的代码:
组件.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones } from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.scss']
})
export class ContentComponent {
public data = [];
public playlist = [];
public apiData: any;
public results = [];
public loading = false;
public noData: any;
p: number = 1;
faSearch = faSearch;
faRedo = faRedo;
faHeadphones = faHeadphones;
faExternalLinkAlt = faExternalLinkAlt;
faPlus = faPlus;
searchQuery: string = "";
clickMessage = '';
constructor(private service: ApiService) { }
getAll() {
this.service.getAll(this.searchQuery).subscribe((results) => {
this.loading = true;
console.log('Data is received - Result - ', results);
this.data = results.results;
this.loading = false;
if (this.data.length <= 0) {
this.noData = true;
} else if (this.data.length >= 1) {
this.noData = false;
} else {
this.noData = false;
}
})
}
closeAlert() {
this.noData = false;
}
addSongToPlaylist(itunes) {
this.playlist.push(itunes);
console.log('Playlist - ', this.playlist);
}
refresh(): void {
window.location.reload();
}
Search() {
this.service.getAll(this.searchQuery).subscribe((results) => {
this.loading = true;
console.log('Data is received - Result - ', results);
this.data = results.results;
this.loading = false;
})
}
ngOnInit() {
}
}
组件.html
<table class="table">
<thead class="thead-light">
<tr>
<th>Artwork</th>
<th>Artist</th>
<th>Title</th>
<th>Genre</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of playlist">
<td><img src="{{user.artworkUrl60}}"></td>
<td>{{user.artistName}}</td>
<td>{{user.collectionName}}</td>
<td>{{user.primaryGenreName}}</td>
<td>{{user.collectionPrice}}</td>
</tr>
</tbody>
</table>
page.html
<app-header [playlist]="playlist"></app-header>
<app-content></app-content>
<app-footer></app-footer>
头文件.ts
import { Component, OnInit, Input } from '@angular/core';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
faHeadphones = faHeadphones;
@Input()playlist = [];
constructor() { }
ngOnInit() {
}
}
header.html
<li class="nav-item">
<a class="nav-link" href="#">{{playlist.length}}</a>
</li>
解决方案
你的问题是里面的对象playlist
和开始的一样。尝试克隆对象并将新项目添加到克隆项目中:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones } from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.scss']
})
export class ContentComponent {
public data = [];
public playlist = [];
public apiData: any;
public results = [];
public loading = false;
public noData: any;
p: number = 1;
faSearch = faSearch;
faRedo = faRedo;
faHeadphones = faHeadphones;
faExternalLinkAlt = faExternalLinkAlt;
faPlus = faPlus;
searchQuery: string = "";
clickMessage = '';
constructor(private service: ApiService) { }
...
addSongToPlaylist(itunes) {
const playlistSong = {...this.playlist};
playlistSong.push(itunes);
this.playlist = playlistSong;
console.log('Playlist - ', this.playlist);
}
...
}
推荐阅读
- php - Laravel Composer 错误:安装失败,将 ./composer.json 还原为其原始内容
- javascript - Sequelize:A未关联到B“nodejs
- awk - 如何在带有逗号文本字段的大型 csv 中使用 awk 分隔符
- r - R 包 googlesheets4 返回客户端错误:(429) RESOURCE_EXHAUSTED 读取公共工作表时
- php - Cakephp 4:FIND_IN_SET 不返回结果
- recaptcha - Google recaptcha v3 recaptcha_response 为空
- python - 警告过滤器优先级
- .net - 处理 Class.SelectedItem.Value 的空值
- c# - 为什么我不能在 Visual Studio 2012 和 2015 中添加对项目的引用?
- javascript - 减少函数中的变异累加器是否被认为是不好的做法?