微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法从 Angular Modal 中的 id 获取元素

如何解决无法从 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 举报,一经查实,本站将立刻删除。