Question

我想使用.notice { display: none; visibility: hidden; } @media screen and (max-width:900px), screen and (max-height:500px) { .wrapper { display: none !important; } .notice { display: block; visibility: visible; } }组件（这是父组件）中的方法getPictures()添加一个新帖子，其中“ post.id”大于10，是列表中的第一个，以及少于10个的所有其他帖子“ post.id”依次添加。我正在尝试使用方法GalleryComponent中的条件来执行此操作，但出现错误：“ TypeError：无法读取未定义的属性'unshift'和'push'”。

父组件代码GalleryComponent：

getPictures()

父组件模板GalleryComponent链接到组件GalleryAddComponent：

export class GalleryComponent implements OnInit {
    collection: Picture[];

    constructor(private galleryService: GalleryService) {
    }

    ngOnInit() {
        this.getPictures();
    }

    getPictures() {
        this.galleryService.getPictures().subscribe((data: Picture[]) => {
            data.forEach(post => {
                if (post.id > 10) {
                    this.collection.unshift(post);
                } else {
                    this.collection.push(post);
                }
            });
        })
    }
}

子组件代码GalleryAddComponent：

<a routerLink="/gallery-add" class="btn btn-outline-success tog">
                    Add New Post
                </a>

GalleryService，其中包含对服务器的请求：

  export class GalleryAddComponent implements OnInit {
    isAdded: boolean = false;

    constructor( private galleryService: GalleryService) {}

    ngOnInit() {
    }
    
    addPost(title: string, url: string): void {
        this.galleryService.add(title, url).subscribe(res => {
            this.isAdded = true;
        });
    }
}

图片模式：

export class GalleryService {
    galleryUrl: string = 'http://localhost:5555/posts';
    httpOptions: object = {
        headers: new HttpHeaders({'Content-Type': 'application/json'})
    };
    constructor(private http: HttpClient) {}

    getPictures(): Observable<Picture[]> {
        return  this.http.get<Picture[]>(`${this.galleryUrl}`);
    }

    add(title: string, url: string): Observable<Picture> {
        const  postObj = {
          title,
            url
        };
        return this.http.post<Picture>(this.galleryUrl, postObj, this.httpOptions);
    }
}

Answer 1

仅供参考，让我们尝试一次，

collection: Picture[]=[];


getPictures() {
        this.galleryService.getPictures().subscribe((data: Picture[]) => {
            data.forEach(post => {
                if (post.id > 10) {
                    this.collection.splice(0,0,post);  //here is updated one line
                } else {
                    this.collection.push(post);
                }
            });
        })
    }

希望它能解决您的问题。

如何在帖子列表中首先添加新帖子？

1 个答案: