使用来自本地 json 文件的 html 中的数据 - typescript, angular 7

Posted 2023-03-13

【中文标题】使用来自本地 json 文件的 html 中的数据 - typescript, angular 7

【英文标题】：Use data in html from local json file - typescript, angular 7

【发布时间】：2019-09-08 09:34:06

【问题描述】：

我想在我的 Angular 7 项目中导入一个简单的本地 json 文件并使用我的 html 文件中的数据。只是一个简单的例子。我已将 json 文件附加为 data.json。我想在 app.component.html 中访问这个 json 文件中的数据，而不是 item

app.component.ts

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  @ViewChild('detailsPanel') details;
  @ViewChild('displayDetails') displayDetails;


  // Need to access this data from a json file
  title = 'dragNdrop';
  todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];

  elementDetails = "";

  drop(event: CdkDragDrop<string[]>) 
    if (event.previousContainer === event.container) 
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     else 
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    
  

  showDetails(text)
    this.elementDetails = text;
  

app.component.html

<div class="container-fluid" style="padding: 2%;">
  <div class="row">
    <div class="col-md-3">
      <h2>Drag and Drop</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3" style="border-right: 1px solid black; height: 100%;">
      <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
        class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of todo" cdkDrag>item</div>
      </div>
    </div>

    <div class="col-md-6">
      <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
        class="example-list" (cdkDropListDropped)="drop($event)">
        <p #detailsPanel class="example-box" *ngFor="let item of done" (click)="showDetails(detailsPanel.innerText)" cdkDrag>item</p>
      </div>
    </div>

data.json

    "list1": [
        "A",
        "B",
        "C",
        "D"
    ]

【问题讨论】：

是的，我会马上添加

@SagarSamal 请参考此链接***.com/questions/47206924/…

【参考方案1】：

在

tsconfig.json

添加到“compilerOptions”中：

    "compilerOptions": 
    
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
 

现在您可以将数据从 JSON 导入

你的组件文件.ts

因此：

import  yourObject  from './data/yourJSON.json'

使用

dataImportedFromMyJson: any[] = yourObject;