如何解决无法从 Angular Modal 中的 id 获取元素
我是 AngularJS 的新手,在使用元素 ID 加载数据时遇到问题。我已经检查过我可以将任何文本值打印到模态,但同样,带有元素 ID 的文本数据不起作用。有什么想法吗?
list.component.html
<a mat-flat-button color="accent" (click)="openDialog()" href="/details/{{element._id}}" target="_blank" class="fctButton">View Details</a>
list-component.ts
import * as moment from "moment";
import { Observable } from "rxjs";
import { APIService } from "../../services/api.service";
import { CSVService } from "../../services/csv.service";
import { FormControl } from "@angular/forms";
import { map,startWith } from "rxjs/operators";
import { Component,OnInit } from "@angular/core";
import { Router,ActivatedRoute } from "@angular/router";
import { TooltipPosition } from "@angular/material/tooltip";
import { MatSnackBar } from "@angular/material/snack-bar";
import { MatDatepickerInputEvent } from "@angular/material/datepicker";
import { MatDialog } from "@angular/material/dialog"; // Dialog
import { DetailElementComponent } from "../details/detail/detail-element/detail-element.component";
@Component({
selector: "app-list",templateUrl: "./list.component.html",styleUrls: ["./list.component.sass"],template: "{{element}}",})
export class ListComponent implements OnInit {
constructor(
private api: APIService,private csvService: CSVService,private router: Router,private route: ActivatedRoute,private _snackBar: MatSnackBar,// public dialog: MatDialog,public dialog: MatDialog,@Inject(MatDialog) public data: { }
) {}
openDialog() { // Dialog
this.dialog.open(DetailElementComponent);
}
detail-element.compoenent.html
<div *ngIf="isLink(element); then link else notLink"> </div>
<ng-template #link>
<a target="_blank" href="{{element}}"> {{ element }} </a>
</ng-template>
<ng-template #notLink>
{{ element }} **// This line won't print on the Modal popuP**
Hello **// Now this line will be print without any problem**
</ng-template>
detail-element.component.ts
import { Component,OnInit,Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-detail-element',templateUrl: './detail-element.component.html',styleUrls: ['./detail-element.component.sass']
})
export class DetailElementComponent implements OnInit {
constructor() {}
@input() element: any; // data to display
ngOnInit(): void {
}
isLink(item): boolean {
return typeof item === 'string' && item.includes('http') && !item.includes(' ');
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。