web-dev-qa-db-ja.com

Angular 4データ/パラメーターをモーダルに渡す（ngforを使用）

私はangular 4を初めて使用し、ngForを使用して配列内にデータを表示しています。各アドオンには、管理したユーザーの数とこれらのユーザー（ID、ロールなど）のリストがあります。バックエンド（スプリングブートプロジェクト）から取得するには、これらのユーザーの数を表示します。ユーザーが数を表示しているボタンをクリックすると、モーダルがポップアップし、これらのユーザーの詳細が表示されます。私が得ている問題は、{{addon.something}}をモーダルに渡す方法です。

       <tbody>
            <tr *ngFor="let addon of addons">
                <td>{{addon.name}}</td>
                <td>{{addon.url}}</td>
                <td>{{addon.location}}</td>
               <td>
                 <button class="btn btn-outline-primary" (click)="open(content,addon)" >{{addon.users.length}}</button>
                 <!--{{addon.users.length}}-->
                </td>

                <td>
                    <a routerLink="/assign_user_to_addon/{{addon.id}}">Add user</a>
                </td>
            </tr>
        </tbody>

(click)="open(content,addon)"に渡そうとしましたが、機能しません。

モーダルを処理するためのTypeScriptコード：

 open(content:any,addon:any) {
    this.modalService.open(content).result.then((result) => {

      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

データ/パラメーターをモーダルに渡すための最良の方法は何でしょうか？

angulartypescriptbootstrap-modalngfor
3
med.b

addonパラメータをmodalService.openメソッドに渡していない。 addonからモーダルにデータを渡したい場合は、（contentパラメータの代わりに）データを渡すだけでよいようです。この例から https://ng-bootstrap.github.io/#/components/modal/examples の場合、contentパラメータを削除して単に渡すと、 addonのように：

html

(click)="open(addon)"

ts

open(content) {
  this.modalService.open(content)...
}

これをテストするには、現在の実装にすべてを残して、次のように引数をthis.modalService.openに変更します。

this.modalService.open(addon)...
2
vincecampanale

私はそれが非常に古い質問であることを知っていますが、これを達成するために多くの苦労をしました。だから、誰かを助けるかもしれないここに書いてください。この回答はAngular 6.に対するものです。

したがって、任意のデータ（Personのような任意のオブジェクトにすることができます）を子に渡したい場合は、次のようにすることができます。

子コンポーネントでは、次のように@Input（）アノテーションを使用してその変数を宣言する必要があります。

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

次に、このdataToTakeAsInputを親コンポーネントから渡すために、以下のコードに示すように、componentInstanceを使用できます。

//Required imports
export class ParentComponent implements OnInit {

  dataPassToChild: any = null;

  constructor(private modalService: NgbModal) { }

  ngOnInit() {

  }
openChilldComponentModel(){

    const modalRef = this.modalService.open(ChildComponent, { size: 'lg',backdrop:false});

    (<ChildComponent>modalRef.componentInstance).dataToTakeAsInput = dataPassToChild;

    modalRef.result.then((result) => {
      console.log(result);
    }).catch( (result) => {
      console.log(result);
    });
  }
}

このように、複数のオブジェクトを渡すことができます。

2
Chandan Rajput