无法从 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 (将#修改为@）