sharepoint框架 [英] sharepoint framework

问题描述

 我根据下拉列表检索列表项选择。  I
我正在尝试使用onpropertychange事件。但我在super.onpropertychange上收到错误{} / ' onPropertyChange'在类型'BaseClientSideWebPart'上不存在 。
请帮我根据下拉选项拉取列表项。目前它仅适用于第一次选择。

 I am retrieve list item based on dropdown selection. I am trying to use onpropertychange event. but I am getting error on super.onpropertychange saying {'onPropertyChange' does not exist on type 'BaseClientSideWebPart' . please help me pull list item based on dropdown selection. currently its working only on first selection.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneDropdown,
 IPropertyPaneDropdownOption
} from '@microsoft/sp-webpart-base';

import * as strings from 'ListItemsWebPartStrings';
import ListItems from './components/ListItems';
import { IListItemsProps } from './components/IListItemsProps';
import { IODataList } from '@microsoft/sp-odata-types';
import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration ,HttpClient } from '@microsoft/sp-http';


export interface IListItemsWebPartProps {
  description: string;
  listName: string;
  onPropertyChange: (propertyPath: string, newValue: any) => void;
}
export interface spListItems{  
  value: spListItem[];  
}  
export interface spListItem{  
  Title: string;  
  ID: string;  
  Created: string;  
  Author: {  
    Title: string;  
  };  
}  
  
export interface spList{  
Title:string;  
id: string;  
}  
export interface spLists{  
  value: spList[];  
}  

export default class ListItemsWebPart extends BaseClientSideWebPart<IListItemsWebPartProps> {
  private listDropDownOptions: IPropertyPaneDropdownOption[] =[];  
  private itemDropDownOptions: IPropertyPaneDropdownOption[] = [];
  private listsDropdownDisabled: boolean = true;
  public render(): void {
    const element: React.ReactElement<IListItemsProps > = React.createElement(
      ListItems,
      {
        listName: this.properties.listName
      }
    );

    ReactDom.render(element, this.domElement);
   
  }

  protected onPropertyPaneConfigurationStart(): void {  
    // loads list name into list dropdown  
    this.GetLists();    
  }
  private GetLists():void{  
    // REST API to pull the list names  
    let listresturl: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists?$select=Id,Title";  
    alert(listresturl);
    this.LoadLists(listresturl).then((response)=>{  
      // Render the data in the web part  
      this.LoadDropDownValues(response.value);  
    });  
  }
  private LoadLists(listresturl:string): Promise<spLists>{  
    // Call to site to get the list names  
    return this.context.httpClient.get(listresturl,SPHttpClient.configurations.v1).then((response: SPHttpClientResponse)=>{  
      return response.json();  
    });  
  } 
  private LoadDropDownValues(lists: spList[]): void{  
    lists.forEach((list:spList)=>{  
      // Loads the drop down values  
      this.listDropDownOptions.push({key:list.Title,text:list.Title});  
    });  
  }
  protected onPropertyChange(propertyPath: string, newValue: any):void{  
    if(propertyPath === "listDropDown"){  
      // Change only when drop down changes  
      super.onPropertyChange(propertyPath,newValue);  
      // Clears the existing data  
      this.properties.ItemsDropDown = undefined;  
      this.onPropertyChange('ItemsDropDown', this.properties.ItemsDropDown);  
      // Get/Load new items data  
      this.GetItems();  
    }  
    else {  
      // Render the property field  
      super.onPropertyChange(propertyPath, newValue);  
    }  
  }  
  
  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown('listDropDown',{  
                  label: "Select List To Display on the page",  
                  options: this.listDropDownOptions  
                }),  
                PropertyPaneDropdown('ItemsDropDown',{  
                  label: "Select Item to display",  
                  options: this.itemDropDownOptions
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

推荐答案

在BaseClientSideWebPart类中，没有名为"OnPropertyChange"的事件，因此它会抛出此错误。

In BaseClientSideWebPart class, there is no events named "OnPropertyChange", so it will throw this error.

我认为你应该使用onPropertyPaneFieldChanged（propertyPath：string，oldValue：any，newValue：任何）而不是根据你对下拉列表属性值的要求改变：

I think you should use onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any) instead based on your requirement for the dropdown list property value changed:

export default class ListItemsWebPart extends BaseClientSideWebPart<IListItemsWebPartProps> {
 // ...
 protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
   if (propertyPath === 'listName' &&
       newValue) {
     // push new list value
     super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
     // get previously selected item
     const previousItem: string = this.properties.itemName;
     // reset selected item
     this.properties.itemName = undefined;
     // push new item value
     this.onPropertyPaneFieldChanged('itemName', previousItem, this.properties.itemName);
     // disable item selector until new items are loaded
     this.itemsDropdownDisabled = true;
     // refresh the item selector control by repainting the property pane
     this.context.propertyPane.refresh();
     // communicate loading items
     this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items');

     this.loadItems()
       .then((itemOptions: IPropertyPaneDropdownOption[]): void => {
         // store items
         this.items = itemOptions;
         // enable item selector
         this.itemsDropdownDisabled = false;
         // clear status indicator
         this.context.statusRenderer.clearLoadingIndicator(this.domElement);
         // re-render the web part as clearing the loading indicator removes the web part body
         this.render();
         // refresh the item selector control by repainting the property pane
         this.context.propertyPane.refresh();
       });
   }
   else {
     super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
   }
 }
 // ...
}

参考：

在Web部件属性中使用级联下拉菜单

onPropertyPaneFieldChanged（propertyPath，oldValue，newValue） 

谢谢

最好的问候

这篇关于sharepoint框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！