Question

我有一个文章网页，我从我的数据库中获取并放入   一个数组，然后使用/articles/{articleId}显示。在每篇文章中，我都有一个   '查看详细信息'按钮。我希望能够单击该按钮然后   被带到Input。我试图这样做   抓取所单击文章的ID（查看详细信息是   点击了一篇文章），但我不确定如何抓住   单击按钮时的id。我已经看到使用findById和   将数据从父级传递给子级，但我不知道如何获得   使用ngFor时工作，或者传递数据的想法是   甚至是一个好方法。我的想法目前是获取id然后传递它   到一个子组件，然后使用我的/article/{articleId}函数来抓取   有关该文章的所有数据，然后显示该文章   子组件（import {Component, OnInit} from "@angular/core"; import {Article} from "../article.model"; import {ArticlesService} from "../articles.service"; import {ActivatedRoute, Params} from "@angular/router"; @Component({ selector: 'app-view-articles', templateUrl: './view-articles.component.html' }) export class ViewArticlesComponent implements OnInit { article: Article; id: string; constructor(private route: ActivatedRoute, private articleService: ArticlesService) { } // this is where I would used the passed id to pass into findArticle but an id is hardcoded in right now ngOnInit() { this.articleService.findArticle("59dcba5fae3c751b45665ca7") .subscribe( (article: Article) => { this.article = article; } ); } }

子组件：

  findArticle(id: string) {
    return this.http.get('http://localhost:3000/article/' + id)
        .map((response: Response) => {
          const article = response.json().obj;
          let transformedArticle: Article = new Article(article.author, article.title, article.body, article._id);
          return transformedArticle;
        })
        .catch((error: Response) => {
          this.errorService.handleError(error.json());
          return Observable.throw(error.json());
        });
  }

文章服务findArticle函数（从子组件调用）

import { Component, OnInit } from '@angular/core';
import {ArticlesService} from "./articles.service";
import {Article} from "./article.model";

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit {
  articles: Article[];

  constructor(private articleService: ArticlesService) { }

  ngOnInit() {
    this.articleService.getArticles()
        .subscribe(
            (articles: Article[]) => {
              this.articles = articles;
            }
        );
  }

}

父组件

<div class="row">
  <!--/span-->
  <div class="col-6 col-sm-6 col-lg-4"
       *ngFor="let article of articles">
    <h2>{{article.title}}</h2>
    <h4>By: {{article.author}}</h4>
    <p>{{article.body}}</p>
    <p><a class="btn btn-default" href="#">View details »</a></p>
  </div>
</div>

父HTML

StartedContracts = COUNTROWS(FILTER(ALLSELECTED(Contracts), Contracts[StartDate] = DateData[Date]))

Answer 1

您可以使用路由器链接，例如。

<div class="row">
  <!--/span-->
  <div class="col-6 col-sm-6 col-lg-4"
       *ngFor="let article of articles">
    <h2>{{article.title}}</h2>
    <h4>By: {{article.author}}</h4>
    <p>{{article.body}}</p>
    <p><a class="btn btn-default" [routerLink]="['/articles',article.id]">View details »</a></p>
  </div>

或者如果你预先创建一个函数..

goToArticleDetails(id) {
  this.router.navigate(['/articles', id]);
}

Answer 2

文章页面：

 $Outlook = New-Object -ComObject Outlook.Application
$csv = Import-Csv C:\Users\poop\Desktop\TestSerial.CSV


foreach ($line in $csv){

$Mail = $Outlook.CreateItem(0)
$Mail.To = "$MainEID"
$Mail.Subject = "$Serial"
$Mail.Body ="Pay rise please"

$Mail.Send()
}

文章页面：

<a class="btn btn-default" (click)="viewDetails(article.id)">View details</a>

import { Router } from '@angular/router';

viewDetails(_id){
   this.router.navigate(['/article/'], { queryParams: { id: _id } });
}

如何从ngFor中的对象获取id用于数据库中的id查找（Angular）？

2 个答案: